This is a migrated thread and some comments may be shown as answers.

mouse over row

4 Answers 13 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Henwa
Top achievements
Rank 1
Henwa asked on 03 Sep 2015, 02:06 PM
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.

4 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 08 Sep 2015, 10:32 AM
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
0
Henwa
Top achievements
Rank 1
answered on 08 Sep 2015, 11:58 AM

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

0
Henwa
Top achievements
Rank 1
answered on 08 Sep 2015, 12:35 PM
i Wanna it like this img ..
0
Konstantin Dikov
Telerik team
answered on 10 Sep 2015, 02:47 PM
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
Tags
Grid
Asked by
Henwa
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Henwa
Top achievements
Rank 1
Share this question
or