RadMenu dynamically placed on Grid Pager - dropdown cut off

2 posts, 0 answers
  1. Timothy
    Timothy avatar
    41 posts
    Member since:
    Aug 2011

    Posted 19 Apr 2012 Link to this post

    Hi I have created a RadMenu dynamically on a Grid Pager the RadGrid has the following properties:-
    <telerik:RadGrid ID="theGridView" runat="server"
       AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True" AllowAutomaticDeletes="True" CellSpacing="0"
       DataSourceID="theSqlDataSource" CssClass="gridview" Width="100%"
       AutoGenerateColumns="False" EnableHeaderContextFilterMenu="True"
       EnableHeaderContextMenu="True" ShowStatusBar="True" Skin="Windows7" ShowGroupPanel="true" GroupPanel-CssClass="hideGroupPanel" Culture="en-NZ"
       OnItemCreated="theGridView_ItemCreated" onitemdeleted="theGridView_ItemDeleted">
       <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True">
          <Scrolling AllowScroll="True" UseStaticHeaders="True" />
          <Resizing AllowColumnResize="True" AllowResizeToFit="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="true" />
    <PagerStyle AlwaysVisible="True" />
    <PagerStyle AlwaysVisible="True" />
    <FilterMenu EnableImageSprites="True" />

    The Menu is created using code in the RadGrid_ItemCreated event when the item is a GridPagerItem with the following code:-
    RadMenu gridOptionsMenu = new RadMenu();
    gridOptionsMenu.OnClientItemOpening = "GridMenuItemOpened";
    gridOptionsMenu.ID = "gridOptionsMenu";
    gridOptionsMenu.ExpandAnimation.Type = AnimationType.None;
    RadMenuItem gridOptionMain = new RadMenuItem("Options");
    RadMenuItem gridOptionTemplate = new RadMenuItem("");
    gridOptionTemplate.Width = 300;
    GridOptionsTemplate template = new GridOptionsTemplate();
    foreach (RadMenuItem menuitem in gridOptionsMenu.GetAllItems())
       if (menuitem.Level > 0)
          template.SetValues(menuitem, theGridView.ClientID, theGridView.MasterTableView.IsFilterItemExpanded, false);

    the menu is shown when clicking the Options Menu item but is shown cut off as shown.

    I have trued various css hacks and changing zIndex of various elements on the OnClientItemOpening in javascript but have got nowhere. What started out as a good idea and I thought reasonably easy to implement has turned into a few hours of frustration.

    Please give me a hint on how to achieve this.

  2. Kate
    Kate avatar
    1898 posts

    Posted 24 Apr 2012 Link to this post

    Hi Timothy,

    The issue that you encounter is not related to the z-index of the controls but rather to the visibility property that is assigned to the different elements of the RadGrid control. You will need to get the correct css class selector and overwrite it by setting visibility property to visible (you can use FireBug tool of FireFox to get the correct css class selector). If this does not help I would ask you a live url that I can test locally and help you out in your particular case.

    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.
Back to Top