RadMenu in Grid CommandItemTemplate

[CP]

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" >

        <CommandItemTemplate>
            <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">
                <Items>
                    <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" />
                        <Items>
                            <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>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem BorderStyle="None" ImageUrl="Images/Ico_Refresh_18x18_blk.png" />
                </Items>
            </telerik:RadMenu>
        </CommandItemTemplate>

        <Columns>

          ......................................

        </Columns>

    </MasterTableView>

    <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
        <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100%" />
        <ClientEvents OnGridCreated="GridCreated" OnRowClick="GridRowClicked" />
    </ClientSettings>

</telerik:RadGrid>

 

Kyle

[Eyup]

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.

Regards,
Eyup
Telerik by Progress