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

RadMenu in Grid CommandItemTemplate

1 Answer 87 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
CP asked on 24 Mar 2017, 01:52 PM

I am trying to replicate the look and feel of an existing web app and need to have a menu in a grid command row that includes a dropdownlist. I have added the menu but the dropdown list is being hidden by the grid. I've tried changing the z-index but cannot get the list to appear in front of the grid.

<telerik:RadGrid ID="rgDiscounts" runat="server" Width="100%" RenderMode="Lightweight"
    AllowSorting="true" AllowMultiRowSelection="true" Skin="Max2017" EnableEmbeddedSkins="false"
    OnNeedDataSource="rgDiscounts_NeedDataSource" OnItemCreated="rgDiscounts_ItemCreated" OnItemDataBound="rgDiscounts_ItemDataBound"
    OnUpdateCommand="rgDiscounts_UpdateCommand" OnInsertCommand="rgDiscounts_InsertCommand" OnDeleteCommand="rgDiscounts_DeleteCommand"
    OnPreRender="rgDiscounts_PreRender" OnItemCommand="rgDiscounts_ItemCommand">
    <MasterTableView DataKeyNames="Discount_Id" ClientDataKeyNames="Discount_Id" AllowMultiColumnSorting="true" AutoGenerateColumns="false" CommandItemDisplay="Top" >
            <telerik:RadMenu ID="rmDiscounts" runat="server" Width="100%" ShowToggleHandle="true" BorderStyle="none"
                EnableRoundedCorners="true" EnableShadows="true" Skin="Max2017" EnableEmbeddedSkins="false"
                OnClientItemClicking="OnClientItemClicking" OnClientItemClicked="onDiscountsClientItemClicked" OnItemClick="rmDiscounts_ItemClick">
                    <telerik:RadMenuItem Text="Add" BorderStyle="None" />
                    <telerik:RadMenuItem Text="Delete" BorderStyle="None" />
                    <telerik:RadMenuItem Text="Items" BorderStyle="None" style="z-index: 9999;" >
                        <GroupSettings ExpandDirection="Down" Width="200px" />
                            <telerik:RadMenuItem Text="Add Product Provider"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Add Product Group"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Add Product Group Type"></telerik:RadMenuItem>                                   
                    <telerik:RadMenuItem BorderStyle="None" ImageUrl="Images/Ico_Refresh_18x18_blk.png" />
    <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
        <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100%" />
        <ClientEvents OnGridCreated="GridCreated" OnRowClick="GridRowClicked" />



1 Answer, 1 is accepted

Sort by
Telerik team
answered on 29 Mar 2017, 05:37 AM
Hi Kyle,

It seems that you are using some custom skin for the menu. I've tested the provided CommandItemTemplate definition on my side both with Lightweight and Classic RenderMode of the grid and menu and the dropdown is displayed in front of the grid as expected, regardless whether I am using a built-in skin or Max2017 with EnableEmbeddedSkins set to false.

Perhaps, you have some custom styles on the page, which cause this issue. You can check your CommandItemTemplate definition with the attached web site sample and verify that the menu dropdown is displayed properly. Then, you can determine the crucial differences between the two projects and try to determine the problematic styling.

If the issue remains, you can modify the attached application to demonstrate it and open a new formal support thread to send it back to us for further investigation.

Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question