[Solved] Display Command Items on mouse over

[Vishal]

Hi Guys,

I want to display command items in rad grid on mouse over as displayed in images. 

Can you please tell me how this can be achieved?

Thank you

[Jayesh Goyani]

Hello,

<ItemTemplate>
                                                           <div class="operationDiv">
                                                               <asp:ImageButton ID="lnkEdit" runat="server" Text="Edit" CommandName="EditThis" OnClientClick='<%# string.Format("return OpenPopUpCategory({0},\"Edit\");",Eval("ID")) %>'
                                                                   ImageUrl="~/images/icon-edit.png" CausesValidation="false"></asp:ImageButton>
                                                               <asp:ImageButton ID="btnShowInfo" runat="server" Text="Info" CommandName="InfoThis"
                                                                   OnClientClick='<%# string.Format("return OpenPopUpCategory({0},\"Info\");",Eval("ID")) %>'
                                                                   ImageUrl="~/images/icon-info.png" CausesValidation="false"></asp:ImageButton>
                                                               <asp:ImageButton ID="lnkDelete" runat="server" Text="Delete" CommandName="DeleteCategoryThis"
                                                                   CommandArgument='<%#Eval("ID")%>' OnClientClick="return confirm('Are you sure you want to delete this?')"
                                                                   ImageUrl="~/images/icon-delete.png" CausesValidation="false"></asp:ImageButton>
                                                           </div>
                                                       </ItemTemplate>

function toggleContent(sender, args, flag) {
    var wrapperEl = $telerik.getElementByClassName(args.get_gridDataItem().get_element(), "operationDiv", "div");
    if (wrapperEl)
        wrapperEl.style.visibility = flag ? "visible" : "";
}

.operationDiv
{
    visibility: hidden;
}

Thanks,
Jayesh Goyani

[Vishal]

Hi Thank you,
Where do I call the toggle function from? 

Thank you

[Jayesh Goyani]

Hello,

<ClientSettings EnableRowHoverStyle="true">
                                    <ClientEvents OnRowMouseOver="showContent" OnRowMouseOut="hideContent" />

                                </ClientSettings>

function showContent(sender, args) {
    toggleContent(sender, args, true);
}

function hideContent(sender, args) {
    toggleContent(sender, args, false);
}

Thanks,
Jayesh Goyani