RadMenu - z index issue

[Chris]

Hi,

I have a RadMenu as part of RadGrid template column - the user can hover over an image (a cog in this case), which expands a menu. I have a problem however, the menu is hidden behind the 'detail' table of the RadGrid. Please see attached screenshot for some more info.

I have tried the following

• Creating a class which sets the z-index to a high number such as 99999 (also using the !important tag to override), and assigning the menu and/or menu items to this class
• As above but adding 'position: absolute;' to it - this seems to work, however the RadGrid I have allows scrolling - when the RadGrid scrolls, the images (being absolutely positioned) 'stick' in their positions when scrolling

Here's my markup:

<telerik:RadGrid ID="gv1" runat="server" CssClass="MyExpandCol" Height="100%" Width="100%" ItemStyle-CssClass="TripRow" AlternatingItemStyle-CssClass="TripRow" OnRowDrop="gv_RowDrop" OnItemDataBound="gv_ItemDataBound" DataSourceID="dsDay1" AllowMultiRowSelection="true" AutoGenerateColumns="false" Font-Size="9px" GridLines="None">
     <MasterTableView AllowPaging="false" AllowSorting="true" ClientDataKeyNames="ID" TableLayout="Fixed" ExpandCollapseColumn-HeaderStyle-Width="10px" ExpandCollapseColumn-CollapseImageUrl="Content/Images/collapse.png" ExpandCollapseColumn-ExpandImageUrl="Content/Images/expand.png" PageSize="50" ShowHeader="false" AllowCustomPaging="false" DataKeyNames="ID" Name="Master" HierarchyDefaultExpanded="true" ShowHeadersWhenNoRecords="false" Font-Size="9px" ItemStyle-CssClass="TripHeaderRow" AlternatingItemStyle-CssClass="TripHeaderRow">
     <DetailTables>
     <telerik:GridTableView Name="Detail" ClientDataKeyNames="ID" TableLayout="Fixed" ShowHeader="false" DataKeyNames="ID" DataSourceID="dsTripDetails" Width="100%" Font-Size="9px" CssClass="DetailGrid">
     <ParentTableRelation>
     <telerik:GridRelationFields DetailKeyField="TripHeaderID" MasterKeyField="ID" />
     </ParentTableRelation>
     <NoRecordsTemplate><br />
     </NoRecordsTemplate>
     <Columns>
       <telerik:GridBoundColumn DataField="DeliveryNoteNo" HeaderText="Ref" SortExpression="DeliveryNoteNo" ItemStyle-Wrap="false" HeaderStyle-Width="22%"></telerik:GridBoundColumn>
     <telerik:GridBoundColumn DataField="PromiseDate" HeaderText="By" SortExpression="PromiseDate" ItemStyle-Wrap="false" HeaderStyle-Width="15%"  DataFormatString="{0:dd MMM}"></telerik:GridBoundColumn>
   <telerik:GridBoundColumn DataField="TrailerDepot" HeaderText="Dep" SortExpression="TrailerDepot" ItemStyle-Wrap="false" HeaderStyle-Width="8%"></telerik:GridBoundColumn>
   <telerik:GridBoundColumn DataField="CustomerName" HeaderText="Customer" SortExpression="CustomerName" ItemStyle-Wrap="false" HeaderStyle-Width="15%"></telerik:GridBoundColumn>
   <telerik:GridBoundColumn DataField="CustomerPostcode" HeaderText="Postcode" SortExpression="CustomerPostcode" ItemStyle-Wrap="false" HeaderStyle-Width="10%"></telerik:GridBoundColumn>
   <telerik:GridBoundColumn DataField="DeliveryWeight" HeaderText="Weight" SortExpression="DeliveryWeight" ItemStyle-Wrap="false" HeaderStyle-Width="13%"></telerik:GridBoundColumn>
   <telerik:GridBoundColumn DataField="PalletsPlanned" HeaderText="Plan" SortExpression="PalletsPlanned" ItemStyle-Wrap="false" HeaderStyle-Width="5%"></telerik:GridBoundColumn>
   <telerik:GridBoundColumn DataField="PalletsPicked" HeaderText="Plan" SortExpression="PalletsPlanned" ItemStyle-Wrap="false" HeaderStyle-Width="5%"></telerik:GridBoundColumn>

     </Columns>
     </telerik:GridTableView>
     </DetailTables>
     <Columns>
       <telerik:GridTemplateColumn DataField="ID">
           <ItemTemplate>
           <table width="100%" cellpadding="0" cellspacing="0" border="1" runat="server" ID="tbl">
           <tr><td></td><td>Trip <asp:Label ID="lblID" runat="server" Text='<%# Bind("ID") %>'></asp:Label> <asp:Label ID="lblSubbie" runat="server" Text='<%# Bind("VehicleOrSubbie") %>'></asp:Label> (<asp:Label ID="lblDepot" runat="server" Text='<%# Bind("DepotLetter") %>'></asp:Label>)</td><td>Total:</td><td><asp:Label ID="lblTotalWeight" runat="server" Text='<%# Bind("TotalWeight") %>'></asp:Label></td><td><asp:Label ID="lblTotalPlan" runat="server" Text='<%# Bind("TotalPlan") %>'></asp:Label></td><td><asp:Label ID="lblTotalPick" runat="server" Text='<%# Bind("TotalPick") %>'></asp:Label></td></tr>
           <tr><td><telerik:RadMenu ID="mn" CssClass="mn" runat="server" OnItemClick="mn_ItemClick"><Items><telerik:RadMenuItem ImageUrl="~/Content/Images/cog.gif"><Items>
                   <telerik:RadMenuItem runat="server" Text="Delete Trip" Value="1">
                   </telerik:RadMenuItem></Items></telerik:RadMenuItem></Items></telerik:RadMenu></td><td><asp:Label ID="lblNotes" runat="server" Text='<%# Bind("TripNotes") %>'></asp:Label></td><td>Remaining:</td><td><asp:Label ID="lblRemainingWeight" OnDataBinding="SetRemainingColour" runat="server" Text='<%# Bind("RemainingWeight") %>'></asp:Label></td><td><asp:Label ID="lblRemainingPlan" OnDataBinding="SetRemainingColour" runat="server" Text='<%# Bind("RemainingPlan") %>'></asp:Label></td><td><asp:Label ID="lblRemainingPick" OnDataBinding="SetRemainingColour" runat="server" Text='<%# Bind("RemainingPick") %>'></asp:Label></td></tr>
           </table>
           </ItemTemplate>
       </telerik:GridTemplateColumn>
     </Columns>

     </MasterTableView>
     <ClientSettings AllowRowsDragDrop="true">
     <Scrolling AllowScroll="true" SaveScrollPosition="true" />
     <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
     <ClientEvents OnRowDropped="OnRowDropped" OnRowDropping="OnRowDropping" OnRowContextMenu="RowContextMenu" />
     <Scrolling UseStaticHeaders="false" AllowScroll="true" />
     <Resizing ClipCellContentOnResize="true" AllowColumnResize="false" />
     </ClientSettings>
     </telerik:RadGrid>

There's also another problem, as you can see from the screenshot. The background colour of the 'cog' is white, even though I have confirmed the png is transparent.  I have tried setting the background-color to be transparent in both CSS and on the BackColor property of the various elements of the menu to no avail.
 
Thanks!

[Peter]

Hi Chris,

Can you send us a working demo of the issue via a support ticket?

Regards,
Peter
the Telerik team