Customize Cell Content

Updated on Sep 23, 2026

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. The following image illustrates the desired result.

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 the following example.

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

Override the CreateCellElement method

C#

public class MyButtonColumn : Telerik.Windows.Controls.GridViewColumn
{
    public override FrameworkElement CreateCellElement(GridViewCell cell, object dataItem)
    {
        RadButton button = cell.Content as RadButton;

        if (button == null)
        {
            button = new RadButton();
            button.Content = "Delete";
            button.Command = RadGridViewCommands.Delete;
            button.CommandParameter = dataItem;
        }

        return button;
    }
}

VB.NET

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
			button.CommandParameter = dataItem
		End If

		Return button
	End Function
End Class

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

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

Define the custom column in code-behind

C#

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

VB.NET

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

See Also

• CellTemplate and CellEditTemplate
• Create Custom Column Editor
• Create Custom Editor with RadGridView