Setting CellTemplate and CellEditTemplate

This article describes how to customize the RadGridView columns by using predefined column types and how to extend the functionality of the columns by defining a non-default editor.

Using Predefined Column Types

RadGridView provides a set of predefined column types like GridViewCheckBoxColumn, GridViewComboBoxColumn, GridViewSelectColumn, etc. that you can customize in accordance with the requirements and the type of properties exposed in your business object.

When you use a standard GridViewDataColumn, the RadGridView control automatically generates controls for the cell's view and edit modes:

  • Default controls in view mode:

    • TextBlock: For string, numeric and DateTime properties

    • CheckBox: For boolean properties

  • Default controls in edit mode:

    • TextBox: For string and numeric properties

    • CheckBox: For boolean properties

    • RadDatePicker: For DateTime properties

Creating CellTemplate and CellEditTemplate for a Column

Sometimes you need to extend the functionality of a column and define a custom editor. To achieve this, create a CellTemplate or CellEditTemplate for the 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 data templates to RadGridView cells by using the CellTemplateSelector and CellEditTemplateSelector properties.

Example 1 demonstrates how to use both properties to customize your columns. We set the RadDateTimePicker as a CellEditTemplate for the DateTime column type and the RadNumericUpDown as a CellTemplate for the Salary column.

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

When you define a CellEditTemplate for a column, the default validation mechanism is bypassed as you're directly binding to the source property. If you require this validation, create a custom column editor instead.

The first example illustrates how to define either a CellTemplate or CellEditTemplate. In the next example, we demonstrate how to set them both for the same column.

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

Tips about CellTemplate and CellEditTemplate

  • You can set the CellTemplate and CellEditTemplate in the code behind. See the Using DataTemplate in Code article for details.

  • If you set DataMemberBinding set to StartingDate, the aggregation, sorting, grouping and filtering operations on the column will be done based on the StartingDate property. If 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 scenarios with a defined column.CellEditTemplate, the new value of the editor is not available in the arguments of the CellEditEnded event that is raised when committing an edit. To get the right value in e.NewValue, create your own Custom Column and override its GetNewValueFromEditor method.

See Also

In this article