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

RadMenu - z index issue

1 Answer 83 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 28 May 2012, 09:28 PM
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!

1 Answer, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 31 May 2012, 02:26 PM
Hi Chris,

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

Regards,
Peter
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Menu
Asked by
Chris
Top achievements
Rank 1
Answers by
Peter
Telerik team
Share this question
or