ModalPopupExtender dynamic user control hosting RadGrid Filter Menu behind Modal Popup

[Timothy]

Hi I have MasterPage/Content page scenario the Content page loads a ModalPopup using the AjaxControlToolkit that loads a user control that has a RadGrid inside a FormView controls EditItemTemplate. The problem is that the FilterMenu/Group By etc only shows up behind the modal popup and is not click able. The same issue for that pager of the RadGrid in that it's Page size combo is not selectable.

I have tried the following:-
1). In the RadGrid's Init event setting the RadGrid style to a higher z-index than the popup
2). changing the FilterMenu and HeaderContextMenu CssClass to one with a higher z-index
3). Setting the RadComboBox in the pager to have a style with a higher z-index

but none of this works. What do I try next??

[Jayesh Goyani]

Hello Timothy,

try with below code snippet.

.filterMenu
{
    z-index: 10002 !important;
}

<FilterMenu CssClass="filterMenu">
  </FilterMenu>

Thanks,.
Jayesh Goyani

[Timothy]

As i mentioned in my first post I tried this as well.

[Timothy]

oops I guess the !important after the number is really important. It worked after I added that to the CssClass and did the same for the pager :-
         GridPagerItem pager = (GridPagerItem)e.Item;
         RadComboBox combo = pager.FindControl("PageSizeComboBox") as RadComboBox;
         combo.Style.Add("z-index", "111001 !important");

[Timothy]

oops again - while the menu's appeared - when you click on the Filter menu's combo box to select the sort of filter you want - this drop down appears behind the modal popup and therefore you can't select what sort of filter you want.

[Jayesh Goyani]

Hello Timothy,

get your Filter menu's combo box in ItemDataBound_event or item_created event.
and assign z-index to it. (same way which was done by you for pagger combobox)

Thanks,
Jayesh Goyani

[Timothy]

Hi Jayesh,
Have tried the following code:-
      protected void theGridView_Init(object sender, EventArgs e)
      {
         base.OnInit(e);
         GridFilterMenu fMenu = ((RadGrid)sender).FilterMenu;
         fMenu.Style.Add("z-index", "111001 !important");
         foreach (RadMenuItem item in fMenu.Items)
         {
            item.Style.Add("z-index", "111001 !important");
         }
      }

      protected void theGridView_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
      {
         if (e.Item is GridFilterMenu)
         {
            GridFilterMenu fMenu = ((RadGrid)sender).FilterMenu;
            fMenu.Style.Add("z-index", "111001 !important");
            foreach (RadMenuItem item in fMenu.Items)
            {
               item.Style.Add("z-index", "111001 !important");
            }
         }
      }

But not much luck please see attached image to see what is happening and to ensure we are talking about the right thing.

[Marin]

Hello Timothy,

 Try overriding the default style for the dropdown of the RadComboBox and setting a greater z-index there:

div.rcbSlide
{
      z-index: 10001;
}

Kind regards,
Marin
the Telerik team

[Timothy]

Wow that was simple. Hours of coding frustration dealt with in a simple css hack.

[Timothy]

Unfortunately after updating to Web Telerik.Web.UI  2011.3.1305.40 this fix has stopped working

[Marin]

Hello Timothy,

 Can you please try the same style with a greater z-index and the !important attribute.If this does not help I will appreciate if you can open a formal support ticket and send us a sample page that replicates the issue so we can check it on our end.

Regards,
Marin
the Telerik team