RadMenu - z index issue

2 posts, 0 answers
  1. Chris
    Chris avatar
    17 posts
    Member since:
    Oct 2010

    Posted 28 May 2012 Link to this post

    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!
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 31 May 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top