Edit this page

Display Edit and Delete buttons only on hover

##

The following example demonstrates how to display the "Edit" and "Delete" buttons only when user hovers over the rows.

Implementation

For initially hiding the "Edit" and "Delete" buttons for a particular RadGrid we are setting the CssClass property of the GridEditCommandButton and GridClientDeleteColumn (to "showOnHover" in the example below). Afterwords, using that CSS class as a selector we are handling the displaying on hover:

<style type="text/css">
    .showOnHover>*{
        visibility: hidden;
    }

    .rgRow:hover .showOnHover>*,
    .rgAltRow:hover .showOnHover>*{
        visibility: visible;
    }
</style>        

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" Width="600px" RenderMode="Lightweight">            
    <MasterTableView AutoGenerateColumns="false">                
        <Columns>
            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" HeaderStyle-Width="80px"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" HeaderStyle-Width="200px"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" HeaderStyle-Width="200px"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Age" HeaderText="Age" HeaderStyle-Width="80px"></telerik:GridBoundColumn>
            <telerik:GridEditCommandColumn HeaderStyle-Width="40px" ButtonType="ImageButton" ItemStyle-CssClass="showOnHover"></telerik:GridEditCommandColumn>
            <telerik:GridClientDeleteColumn HeaderStyle-Width="40px" ItemStyle-CssClass="showOnHover"></telerik:GridClientDeleteColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("FirstName", typeof(string));
    table.Columns.Add("LastName", typeof(string));
    table.Columns.Add("Age", typeof(int));
    for (int i = 0; i < 5; i++)
    {
        table.Rows.Add(i, "FirstName" + i, "LastName" + i, 20 + i);
    }

    (sender as RadGrid).DataSource = table;
}