Edit this page

Add a Button Column

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

RadGridView with custom button column

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

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

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;
    }
}
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

<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

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

<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