Xceed Toolkit Plus for WPF v4.6 Documentation
Cell Editors
Welcome to Xceed Toolkit Plus for WPF v4.6 > DataGrid, ListBox, Chart, AvalonDock, and PropertyGrid > Datagrid control > Fundamentals > Manipulating Data > Editing and Validating Data > Editors > Cell Editors
Prerequisite Knowledge
Microsoft Windows SDK: Styling and Templating
DataGrid Fundamentals: Editing Data
Advanced Concepts: Templates

The content of the cells contained in a grid are edited with CellEditors, whose type, by default, is determined by the data type of a cell's content (see Table 1).  Custom cell editors can also be provided per column by setting a column's CellEditor property, or per data type through the DataGridControl's DefaultCellEditors property.

Table 1: Default cell editors

Data type Cell editor Description
Int16, Int32, Int64, Single, Double, Decimal NumericUpDown-derived classes Represents a control that limits the value extracted from the inputted text to be a numeric value.
Boolean DataGridCheckBox Represents a control used to edit and display boolean values.
String, XmlElement AutoSelectTextBox Represents a text box whose content is selected when it receives the focus as well as performs automatic focus navigation when the caret reaches the extremities of the text range.
DateTime DataGridDatePicker Represents a control used to edit and display dates.

Edit Templates

DataTemplates are the most commonly used form of template and define the appearance of the data items displayed in an ItemsControl or the content of a ContentControl. Cell editors expose, through the EditTemplate property, a DataTemplate which is used to edit the content of a cell (ContentControl).

The DataTemplate provided though the EditTemplate property can contain a single control (see Example 1) or it can be composed of various controls to form a more complex cell editor (see Example 2). Regardless of how an editor is composed, one element must be bound to the cell content using the CellEditorBinding markup extension, which interprets and creates the binding required between a cell and its editor to allow an editor to modify the content of its associated cell.

Activation gestures are key and/or text input, which cause an element to enter edit mode and are defined through a cell editor's ActivationGestures property (see Examples 1 and 2).

In addition to providing custom cell editors on a per-column basis, they can also be provided per data type through a grid's DefaultCellEditors property (see Example 3).

The cell editors provided through the DefaultCellEditors property will only be used when a grid's AutoCreateColumns property is set to true.

The CellEditor class also exposes static editors that can be assigned to a column's CellEditor property if the built-in editors provided by Xceed DataGrid for WPF are to be used. 

Cell Editor Display Conditions

The conditions under which cell editors are displayed are determined by the value of the CellEditorDisplayConditions property, which can be defined for the entire grid, pre column, or per row. The EditTriggers and CellEditorDisplayConditions properties work independently of each other. For example, if the EditTriggers property is set to None and the CellEditorDisplayConditions property is set to CellIsCurrent, when a cell becomes current, its editor will be displayed and the content of the cell can be edited when focus is given to the cell editor (see Example 1).

A cell editor can be displayed without it being in edit mode.

Additional Editor Controls

In addition to the default cell editors that are used to edit the content of cells that have a specific data type, other editor controls, which can be used both inside and outside of a grid, are also available:

Examples

All examples in this topic assume that the grid is bound to the Orders table of the Northwind database, unless stated otherwise.

Example 1: Providing a simple cell editor

The following examples demonstrates how to change the edit template of the cell editor for the ShipVia column to a Slider control.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                    Source="{Binding Source={x:Static Application.Current},
                                                      Path=Orders}"/>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}">
    <xcdg:DataGridControl.Columns>
     <xcdg:Column FieldName="ShipVia">
       <xcdg:Column.CellEditor>
         <xcdg:CellEditor>
           <xcdg:CellEditor.EditTemplate>
             <DataTemplate>
               <Slider Value="{xcdg:CellEditorBinding}" Minimum="1" Maximum="3"/>
             </DataTemplate>
           </xcdg:CellEditor.EditTemplate>
           <xcdg:CellEditor.ActivationGestures>
             <xcdg:KeyActivationGesture Key="Right"/>
             <xcdg:KeyActivationGesture Key="Left"/>
           </xcdg:CellEditor.ActivationGestures>
         </xcdg:CellEditor>
       </xcdg:Column.CellEditor>
     </xcdg:Column>
    </xcdg:DataGridControl.Columns>
  </xcdg:DataGridControl>
</Grid>

Example 2: Providing a complex cell editor

The following example demonstrates how to change the edit template of the cell editor for the Freight column to a custom calculator control. The C# code for the Calculate method called in the buttons' Click event simply calculates the new equation and is not provided. To shorten the code, some of the Button and KeyActivationGesture declarations have been removed.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                    Source="{Binding Source={x:Static Application.Current},
                                                      Path=Orders}"/>
  </Grid.Resources>
   <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}">
      <xcdg:DataGridControl.Columns>
        <xcdg:Column FieldName="Freight">
           <xcdg:Column.CellEditor>
              <xcdg:CellEditor>
                 <xcdg:CellEditor.EditTemplate>
                    <DataTemplate>
                        <DockPanel>
                           <TextBlock x:Name="actual_value"
                                     Text="{xcdg:CellEditorBinding}"
                                      DockPanel.Dock="Top"/>
                           <UniformGrid Columns="4" x:Name="parentPanel"
                                        Tag="{Binding ElementName=actual_value,
                                                      Path=Text,
                                                      Mode=TwoWay,
                                                      UpdateSourceTrigger=PropertyChanged}"
                                        Button.Click="Calculate"
                                        DockPanel.Dock="Top">
                              <Button x:Name="seven" Content="7"/>
                              <!-- ... -->
                              <Button x:Name="addition" Content="+"/>
                           </UniformGrid>
                           <TextBlock x:Name="current_equation" DockPanel.Dock="Bottom"/>
                         </DockPanel>
                     </DataTemplate>
                 </xcdg:CellEditor.EditTemplate>
                 <xcdg:CellEditor.ActivationGestures>
                    <xcdg:KeyActivationGesture Key="NumPad0"/>
                    <!-- ... -->
                    <xcdg:KeyActivationGesture Key="NumPad9"/>
                 </xcdg:CellEditor.ActivationGestures>
              </xcdg:CellEditor>
           </xcdg:Column.CellEditor>
        </xcdg:Column>
      </xcdg:DataGridControl.Columns>
   </xcdg:DataGridControl>
</Grid>

Example 3: Providing a default cell editor

The following example demonstrates how to provide a default cell editor for columns that have an Int32 data type.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
      xmlns:s="clr-namespace:System;assembly=mscorlib">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                    Source="{Binding Source={x:Static Application.Current},
                                                      Path=Orders}"/>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}">
   <xcdg:DataGridControl.DefaultCellEditors>
     <xcdg:CellEditor x:Key="{x:Type s:Int32}">
       <xcdg:CellEditor.EditTemplate>
         <DataTemplate>
           <Slider Value="{xcdg:CellEditorBinding}"/>
         </DataTemplate>
       </xcdg:CellEditor.EditTemplate>
     </xcdg:CellEditor>
   </xcdg:DataGridControl.DefaultCellEditors>
  </xcdg:DataGridControl>
</Grid>
Show All
Hide All

 

 

 

Copyright Xceed Software Inc

Send Feedback