Setting CellTemplate and CellEditTemplate

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.

In addition, when a standard GridViewDataColumn is used, the RadGridView control automatically generates controls for the cell when it is in both view and edit mode.

Default controls in view mode

  • TextBlock: For string, numeric and DateTime properties

  • CheckBox: For boolean properties

Default editors

  • TextBox: For string and numeric properties

  • CheckBox: For boolean properties

  • RadDatePicker: For DateTime properties

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 for 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.

You can also conditionally apply different templates for the different items by using the CellTemplateSelector and CellEditTemplateSelector properties.

Example 1 demonstrates how you can use both of these properties to customize your columns.

Example 1: Setting columns' CellTemplate and CellEditTemplate

<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 RadGridView defined above will be displayed as shown in Figure 1.

Figure 1: RadGridView with CellTemplate and CellEditTemplate defined

Telerik Silverlight DataGrid Cell Template Cell Edit Template

As you can see, the editor for a column of type DateTime is a RadDateTimePicker, while the template for the Salary column is now a RadNumericUpDown.

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 require this validation, you can create a custom column editor instead as demonstrated here.

Although the example above illustrates defining either a CellTemplate or CellEditTemplate, it is possible to set them both for the same column. Example 2 shows how this can be done.

Example 2: Setting the CellTemplate and CellEditTemplate of a single 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 DataMemberBinding="{Binding Salary}"> 
            <telerik:GridViewDataColumn.CellTemplate> 
                <DataTemplate> 
                    <StackPanel Orientation="Horizontal"> 
                        <TextBlock Text="$" /> 
                        <TextBlock Text="{Binding Salary}" Foreground="Green" /> 
                    </StackPanel> 
                </DataTemplate> 
            </telerik:GridViewDataColumn.CellTemplate> 
            <telerik:GridViewDataColumn.CellEditTemplate> 
                <DataTemplate> 
                    <telerik:RadNumericUpDown Value="{Binding Salary}" /> 
                </DataTemplate> 
            </telerik:GridViewDataColumn.CellEditTemplate> 
        </telerik:GridViewDataColumn> 
    </telerik:RadGridView.Columns> 
</telerik:RadGridView> 
The RadGridView defined above will be displayed as shown in Figure 1.

Figure 2: RadGridView with CellTemplate and CellEditTemplate defined for a single column

Telerik Silverlight DataGrid Cell Template Cell Edit Template

If you want to set these properties in code-behind, you can check this help article.

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 does not need to perform any aggregation, sorting, grouping or filtering operations for the column, then you can use a 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 committing an edit. To get the right value in e.NewValue, you can create your own Custom Column and override its GetNewValueFromEditor method.

See Also

In this article
Not finding the help you need? Improve this article