mouse over row

[Henwa]

I have  RadGridView i want to display edit , delete buttons  in mouse over row , 

I would prefer not to have the button display on each row by default.

[Konstantin Dikov]

Hello Henwa,

You can achieve the desired behavior entirely with CSS, by setting the CssClass property of the ItemStyle and AlternatingItemStyle:

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" Width="100%" RenderMode="Lightweight">
    <ItemStyle CssClass="customItemStyle"/>
    <AlternatingItemStyle CssClass="customItemStyle"/>
    <MasterTableView AutoGenerateColumns="false">
        <Columns>
            <telerik:GridEditCommandColumn HeaderStyle-Width="80px"></telerik:GridEditCommandColumn>
            <telerik:GridClientDeleteColumn HeaderStyle-Width="80px"></telerik:GridClientDeleteColumn>
            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" HeaderStyle-Width="50px"></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"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

And the CSS:

<style type="text/css">
    .customItemStyle .rgEdit,
    .customItemStyle button[value="Delete"]{
        visibility: hidden;
    }

    .customItemStyle:hover .rgEdit,
    .customItemStyle:hover button[value="Delete"]{
        visibility: visible;
    }
</style>

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Henwa]

Hi Konstantin  , 

 thanks so much its works but i use Custom Skin so , i edited it like 

 .RadGrid_MYCustomSkin .rgRow a
        {
            visibility: hidden;
        }
        
        .RadGrid_MYCustomSkin:hover .rgRow a
        {
            visibility: visible;
        }
        
        .RadGrid_​MYCustomSkin .rgAltRow a
        {
            visibility: hidden;
            }
            
         .RadGrid_MYCustomSkin:hover .rgAltRow a
        {
              visibility: visible;
            }​

to work in this 2 columns 

  <telerik:GridTemplateColumn UniqueName="EditCol">
                        <ItemTemplate>
                            <asp:LinkButton ID="EditLink" runat="server" CommandArgument='<%# Bind("id") %>'
                                Text="Edit"></asp:LinkButton>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="DeleteCol">
                        <ItemTemplate>
                            <asp:LinkButton ID="Deletlink" runat="server" CommandArgument='<%# Bind("id") %>'>
                            <img src="/img/delete.png" />
                            </asp:LinkButton>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>

 

but when Hover all Links in grid showed i wanna if i show only edit , delete buttons for The row i hover on it only ,is there any way to do that ,

 Reagards​ , 

[Henwa]

i Wanna it like this img ..

[Konstantin Dikov]

Hi Henwa,

If you want to limit the hiding/displaying logic for only those elements you can add custom classes to them (as in my initial example with the classes present in the default buttons) and modify the CSS selectors accordingly.

Please give this a try and see if the result meets your requirement.


Regards,
Konstantin Dikov
Telerik