Customizing the Action Buttons in Telerik RadGrid

This article describes how to customize the Edit, Update, Cancel, and Insert buttons in GridEditCommandColumn and GridButtonColumn.

The examples below explain how to customize the buttons in Grid's View mode. If you need to customize these buttons in Edit or Insert mode, see Customizing the Appearance of Auto-generated Action Buttons.

Customize the Auto-Generated Edit and Delete Column Buttons

To enable the auto-generated Edit and Delete columns:

ASP.NET

        <telerik:RadGrid ... AutoGenerateEditColumn="true" AutoGenerateDeleteColumn="true">

You can access and modify the generated controls in the code-behind. You can cast the control to Button type in the highly recommended Lightweight RenderMode. For Classic RenderMode, the control is of type LinkButton.

C#

    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = e.Item as GridDataItem;

            Button editButton = item["AutoGeneratedEditColumn"].Controls[0] as Button;
            editButton.BackColor = Color.LightCyan;

            Button deleteButton = item["AutoGeneratedDeleteColumn"].Controls[0] as Button;
            deleteButton.BackColor = Color.Orange;
        }
    }

VB.NET

    Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
        If TypeOf e.Item Is GridDataItem Then
            Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)

            Dim editButton As Button = TryCast(item("AutoGeneratedEditColumn").Controls(0), Button)
            editButton.BackColor = Color.LightCyan

            Dim deleteButton As Button = TryCast(item("AutoGeneratedDeleteColumn").Controls(0), Button)
            deleteButton.BackColor = Color.Orange
        End If
    End Sub

Customize the Command Column Buttons

There are various situations in which you would like to change the buttons in GridEditCommandcolumn or GridButtonColumn. For simple modifications (like alternating the font size or family), you can find the respective buttons (hooking the ItemDataBound event of the grid) and apply your preferences through the Style attribute of that button.

You can also change the default link buttons to other types of buttons by simply changing the ButtonType property of the GridEditCommandColumn or GridButtonColumn. Depending on the chosen option, the grid will generate different buttons. For the highly recommended Lightweight RenderMode, the default type is FontIconButton (cast to Button in code-behind). For Classic RenderMode, the type is LinkButton.

ASP.NET

                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn"
                        ButtonType="ImageButton">
                    </telerik:GridEditCommandColumn>
                    <telerik:GridButtonColumn UniqueName="ViewDetailsColumn"
                        CommandName="ViewDetails" Text="View Details"
                        ButtonType="PushButton">
                    </telerik:GridButtonColumn>

C#

    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = e.Item as GridDataItem;

            ImageButton editButton = item["EditCommandColumn"].Controls[0] as ImageButton;
            editButton.BackColor = Color.Aquamarine;

            Button viewDetailsButton = item["ViewDetailsColumn"].Controls[0] as Button;
            viewDetailsButton.BackColor = Color.Turquoise;
        }
    }

VB.NET

Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim item As GridDataItem = TryCast(e.Item, GridDataItem)
        
        Dim editButton As ImageButton = TryCast(item("EditCommandColumn").Controls(0), ImageButton)
        editButton.BackColor = Color.Aquamarine
        
        Dim viewDetailsButton As Button = TryCast(item("ViewDetailsColumn").Controls(0), Button)
        viewDetailsButton.BackColor = Color.Turquoise
    End If
End Sub

Achieve Full Customization Using a Template

You can also use a GridTemplateColumn to achieve the same functionality with full customization:

ASP.NET

                    <telerik:GridTemplateColumn UniqueName="TemplateButtonColumn"
                        HeaderText="Template Buttons">
                        <ItemTemplate>
                            <telerik:RadPushButton ID="RadPushButton1" runat="server" Text="Edit"
                                CommandName="Edit">
                                <Icon CssClass="rbEdit"></Icon>
                            </telerik:RadPushButton>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>

C#

    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = e.Item as GridDataItem;

            RadPushButton templateButton = item.FindControl("RadPushButton1") as RadPushButton;
            templateButton.BackColor = Color.Aqua;
        }
    }

VB.NET

Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim item As GridDataItem = TryCast(e.Item, GridDataItem)
        
        Dim templateButton As RadPushButton = TryCast(item.FindControl("RadPushButton1"), RadPushButton)
        templateButton.BackColor = Color.Aqua
    End If
End Sub