Edit this page

Setting CellTemplate and CellEditTemplate

When a CellEditTemplate is defined for a column, the default validation mechanism is bypassed as you're directly binding to the source property. If you need such validation, you should create a custom column editor instead as demonstrated here.

RadGridView provides a set of predefined column types like GridViewCheckBoxColumn, GridViewComboBoxColumn, GridViewSelectColumn, etc., which enable you to customize it according to the particular requirements and the type of properties exposed in your business object. However, sometimes it may turn out that you want to extend the functionality of your columns and define a different editor for example. This can be easily achieved by creating a CellTemplate or CellEditTemplate of a column.

  • CellTemplate - gets or sets the data template for the cell in view mode.

  • CellEditTemplate - gets or sets the data template for the cell in edit mode.

Default controls for view mode

  • TextBlock: for string, numeric, DateTime properties;

  • CheckBox: for boolean properties;

Default editors

  • TextBox: for string and numeric properties;

  • CheckBox: for boolean properties;

  • RadDatePicker: for DateTime properties.

In case you want to change those default elements for a particular columns, you may define them as follows:

Example 1 Setting the CellTemplate and CellEditTemplate of a column

<telerik:RadGridView x:Name="EmployeesGrid" AutoGenerateColumns="False" ItemsSource="{Binding Employees}">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding FirstName}" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding LastName}" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding StartingDate}">
            <telerik:GridViewDataColumn.CellEditTemplate>
                <DataTemplate>
                    <telerik:RadDateTimePicker SelectedDate="{Binding StartingDate}" IsTooltipEnabled="False"/>
                </DataTemplate>
            </telerik:GridViewDataColumn.CellEditTemplate>
        </telerik:GridViewDataColumn>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Salary}">
            <telerik:GridViewDataColumn.CellTemplate>
                <DataTemplate>
                    <telerik:RadNumericUpDown Value="{Binding Salary}" />
                </DataTemplate>
            </telerik:GridViewDataColumn.CellTemplate>
        </telerik:GridViewDataColumn>
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

The grid defined above will be displayed as follows:

As it can be seen, the editor for a column of type DateTime is defined as RadDateTimePicker, while the template for the numeric column is set as RadNumericUpDown.

Although the example above illustrates defining either CellTemplate or CellEditTemplate, it is possible to set them both for one and the same column. The exact implementation depends entirely on the specific requirements.

If you want to set a CellTemplate in code-behind, you can check this help article for reference.

Having DataMemberBinding set to StartingDate, the aggregation, sorting, grouping and filtering operations on this column will be done based on the StartingDate property.

In case the user do not need to perform any aggregation, sorting, grouping or filtering operations for the column, then you can define GridViewColumn instead.

In a scenario when there is a column.CellEditTemplate defined, the new value of the editor is not available in the arguments of the CellEditEnded event raised when commiting an edit. To get the right value in e.NewValue, you can create your own Custom Column and override its GetNewValueFromEditor method.

See Also