Customize Cell Content

This article demonstrates how to add a column with a delete button for each row. We will benefit from the static RadGridViewCommands class to automatically delete the corresponding row item upon clicking the button. Figure 1 illustrates the desired result.

Figure 1: RadGridView with custom button column

There are several ways to achieve this. Let's look at some of them.

• Create a Custom Column
• Use the GridViewColumn's CellTemplate Property

Create a Custom Column

This approach involves inheriting from GridViewColumn and overriding the CreateCellElement method. In this method, you can create the button (if it has not already been created) and set its properties as demonstrated in Example 1.

In order to automatically export a custom column, it should implement the IExportableColumn interface.

Example 1: Override the CreateCellElement method

• C#
• VB.NET

public class MyButtonColumn : Telerik.Windows.Controls.GridViewColumn 
{ 
    public override FrameworkElement CreateCellElement(GridViewCell cell, object dataItem) 
    { 
        RadButton button = new RadButton(); 
        button.Content = "Delete"; 
        button.Command = RadGridViewCommands.Delete; 
        button.CommandParameter = dataItem;  
        return button; 
    } 
} 

Public Class MyButtonColumn 
Inherits Telerik.Windows.Controls.GridViewColumn 
 
    Public Overrides Function CreateCellElement(ByVal cell As GridViewCell, ByVal dataItem As Object) As FrameworkElement 
        Dim button As RadButton = TryCast(cell.Content, RadButton) 
        If button Is Nothing Then 
            button = New RadButton() 
            button.Content = "Delete" 
            button.Command = RadGridViewCommands.Delete 
        End If 
 
        button.CommandParameter = dataItem 
 
        Return button 
    End Function 
End Class 

Now you need to add this custom column to our RadGridView's Columns collection. Example 2 shows how to do this in XAML.

Example 2: Define the custom column in XAML

• XAML

<telerik:RadGridView.Columns> 
    <!-- ... --> 
    <my:MyButtonColumn Header="Delete" /> 
</telerik:RadGridView.Columns> 

The same can be achieved in code-behind as illustrated in Example 3.

Example 3: Define the custom column in code-behind

• C#
• VB.NET

private void clubsGrid_DataLoaded(object sender, EventArgs e) 
{ 
    this.clubsGrid.Columns.Add(new MyButtonColumn() 
    { 
        Header = "Delete" 
    }); 
} 

Private Sub clubsGrid_DataLoaded(ByVal sender As Object, ByVal e As EventArgs) 
    Me.clubsGrid.Columns.Add(New MyButtonColumn() With {.Header = "Delete"}) 
End Sub 

Use the GridViewColumn's CellTemplate Property

With this approach we will re-define the template of the cells for that column. In this case, we specify a simple DataTemplate which contains our delete button.

Specify the GridViewColumn's CellTemplate

• XAML

<telerik:RadGridView.Columns> 
    <!-- ... --> 
    <telerik:GridViewColumn Header="Delete" > 
        <telerik:GridViewColumn.CellTemplate> 
            <DataTemplate> 
                <telerik:RadButton Content="Delete"  
                        Command="telerik:RadGridViewCommands.Delete" 
                        CommandParameter="{Binding}" /> 
            </DataTemplate> 
        </telerik:GridViewColumn.CellTemplate> 
    </telerik:GridViewColumn> 
</telerik:RadGridView.Columns> 

Notice that we've set the Command of the button to the RadGridViewCommands.Delete command and passed in the current row item (the DataContext of the cell) as the CommandParameter.