mouse over row

5 posts, 0 answers
  1. Henwa
    Henwa avatar
    6 posts
    Member since:
    Jan 2015

    Posted 03 Sep 2015 Link to this post

    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.
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 08 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Henwa
    Henwa avatar
    6 posts
    Member since:
    Jan 2015

    Posted 08 Sep 2015 in reply to Konstantin Dikov Link to this post

    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​ , 

  4. Henwa
    Henwa avatar
    6 posts
    Member since:
    Jan 2015

    Posted 08 Sep 2015 in reply to Henwa Link to this post

    i Wanna it like this img ..
  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 10 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top