VIBlend - .NET Controls and Components for Silverlight, WPF and Windows Forms

// Client Login

Home

Products

Downloads

Purchase

Support

About

WinForms Controls

WinForms DataGrid

Navigation Bars

Ribbon Interface

Calendar Control

TreeView Control

ComboBox Control

ListBox Control

Common Controls

Tab Control

OLAP Pivot Table

Free Controls

Silverlight Controls

Silverlight DataGrid

Scheduler Control

Ribbon Bar Control

Common Controls

Data Entry Controls

List Controls

ComboBox Control

Menu Control

TreeView Control

Navigation Bars

Tab Control

OLAP Pivot Table

WPF Controls

WPF DataGrid

Data Entry Controls

Navigation Bars

WPF Tab Control

How to use an editor and allow users to edit cells in VIBlend DataGrid for Silverlight?

Article Information

Article relates to VIBlend DataGrid for Silverlight

How To

Create DataTemplates and then apply them as grid cell editors.

Solution

To achieve this, follow these steps:

1. Specify the DataGrid's namespace.

xmlns:c="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.DataGrid"

2. Create Data Templates which represent a TextBox and CheckBox editors.

<UserControl.Resources>
    <!-- DataTemplate for TextBox in-place editor -->
    <DataTemplate x:Key="cellEditTextBoxTemplate">
        <TextBox Text="{Binding BookTitle, Mode=TwoWay}"/>
    </DataTemplate>

    <!-- DataTemplate for CheckBox in-place editor -->
    <DataTemplate x:Key="cellEditCheckBoxTemplate">
        <Grid>
            <editors:CheckBox IsChecked="{Binding IsInStock, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </DataTemplate>

    <!-- DataTemplate for CheckBox column -->
    <DataTemplate x:Key="cellCheckBoxTemplate">
        <Grid>
            <editors:CheckBox IsChecked="{Binding IsInStock}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </DataTemplate>
</UserControl.Resources>

3. Create a new DataGrid instance and add its BoundFields. Set the CellEditTemplate property to point to the cellEditTextBoxTemplate.

<viblend:DataGrid x:Name="dataGrid" Margin="4" Grid.Row="1" AutoGenerateColumns="True">
<c:DataGrid.BoundFields>
    <c:BoundField Text="Book Title" DataField="BookTitle" Width="145" CellEditTemplate="{StaticResource cellEditTextBoxTemplate}" CellEditorActivationFlags="MOUSE_CLICK_SELECTED_CELL" CellEditorDeActivationFlags="MOUSE_CLICK" />
    <c:BoundField Text="ISBN" DataField="ISBN" Width="165"/>
    <c:BoundField Text="Author" DataField="Author" Width="155" SortMode="Automatic" />
    <c:BoundField Text="In Stock" DataField="IsInStock" Width="147" SortMode="Automatic" CellEditorActivationFlags="MOUSE_MOVE" CellEditorDeActivationFlags="MOUSE_MOVE" CellDataTemplate="{StaticResource cellCheckBoxTemplate}" CellEditTemplate="{StaticResource cellEditCheckBoxTemplate}"/>
</c:DataGrid.BoundFields>

Silverlight Controls	WinForms Controls	Knowledge Base	About Us

Silvelright DataGrid	Ribbon Interface	Technical Support	Blog
Silverlight Editors	WinForms DataGrid
Silverlight Ribbon Bar	Calendar	Downloads	Forum
Navigation Bars	Navigation Bars
Menu & ContextMenu	TreeView	Purchase Online	Client Login
ComboBox & ListBox	Tab Control
Silverlight Pivot Table	WinForms Pivot Grid	Request a feature	Report a bug