Filter menu appearing behind Radgrid

[Barry McMillen]

I have a LinkButton that i am using to activate a tooptip that is displaying a RadGrid of items. When i try to filter the items in the Radgrid the filter menu displays behind the grid. Any help would be appreciated.
A gif of what it looks like is attached.
Code snippets are below.
    
Markup:

<%@ Register Src="~/Controls/FavoritesTooltip.ascx" TagName="OrderStatusTooltip" TagPrefix="ost" %>
...
<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Position="BottomLeft"
    RelativeTo="Element" ShowEvent="OnClick" HideEvent="ManualClose" Animation="Fade"
    OnAjaxUpdate="OnShowDeletedItems" Width="225px"
    Style="font-size: 18px; text-align: left; font-family: Arial;">
      <TargetControls>
                <telerik:ToolTipTargetControl TargetControlID="btnShowDeletedItemsTop" />
                <telerik:ToolTipTargetControl TargetControlID="btnShowDeletedItemsBottom" />
</TargetControls>
</telerik:RadToolTipManager>
...
<asp:Panel ID="pnlDeleteItemsLinkTop" runat="server" Visible="true">
  <p style="float:left">
    <asp:LinkButton ID="btnShowDeletedItemsTop" runat="server" CssClass="button_b">
        <span><%= DeletedItemsPrompt %></span>
    </asp:LinkButton>
  </p>
</asp:Panel>

Code Behind:

protected void OnShowDeletedItems(object sender, Telerik.Web.UI.ToolTipUpdateEventArgs e)
    {
        if (e.TargetControlID == "btnShowDeletedItemsBottom")
            RadToolTipManager1.Position = Telerik.Web.UI.ToolTipPosition.TopLeft;

        System.Web.UI.Control ctrl = Page.LoadControl("~/Controls/FavoritesTooltip.ascx");
        e.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl);

        StringBuilder sb = new StringBuilder();
        if (!CurrentList.Description.IsNullOrWhiteSpace())
            sb.AppendFormat("{0}'s ", CurrentList.Description);
        sb.Append("Deleted Items");

        Controls_FavoritesTooltip tooltip = (Controls_FavoritesTooltip)ctrl;
        tooltip.FavoritesID = CurrentList.Id;
        tooltip.FavoritesDescription = CurrentList.Description;
        tooltip.Heading = sb.ToString();
    }

User Control Markup:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FavoritesTooltip.ascx.cs" Inherits="Controls_FavoritesTooltip" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="Telerik" %>
<div id="Tooltip" class="tooltip">
    <asp:Panel ID="Panel1" runat="server">
        <div class="header" id="HeaderContent" runat="server">
            <h4 style="color: White;">
                <%= Heading %>
            </h4>
        </div>
        <telerik:RadGrid ID="rgDeletedFavoriteItems"  runat="server" ShowFooter="True" EnableEmbeddedSkins="false"
            GridLines="Both" AllowSorting="True" AutoGenerateColumns="false" Skin="ECISkin" st
            AllowFilteringByColumn="true" AllowPaging="true" PageSize="20">
            <GroupingSettings CaseSensitive="false" />
            <PagerStyle Mode="NumericPages" />
            <MasterTableView DataKeyNames="OldItemCompany,OldItemNumber" NoMasterRecordsText="No Items Found">
                <Columns>
                    <telerik:GridBoundColumn DataField="OldItemCompany" SortExpression="OldItemCompany"
                        HeaderText="Item Company" UniqueName="OldItemCompany" FilterControlWidth="40px"
                        ConvertEmptyStringToNull="false">
                        <ItemStyle Width="40px" HorizontalAlign="Left" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="OldItemNumber" SortExpression="OldItemNumber"
                        HeaderText="Item Number" UniqueName="SiteAccount" FilterControlWidth="80px"
                        ConvertEmptyStringToNull="false">
                        <ItemStyle Width="80px" HorizontalAlign="Left" />
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </asp:Panel>
</div>

User Control Code Behind:

public partial class Controls_FavoritesTooltip : System.Web.UI.UserControl
{
    private Guid _favoritesID = Guid.Empty;
    private string _favoritesDescription = String.Empty;
    private string _heading = String.Empty;

    public Guid FavoritesID
    {
        get { return _favoritesID; }
        set { _favoritesID = value; }
    }
    public string FavoritesDescription
    {
        get { return _favoritesDescription; }
        set { _favoritesDescription = value; }
    }
    public string Heading
    {
        get { return _heading; }
        set { _heading = value; }
    }

    #region OnInit
    protected override void OnInit(EventArgs e)
    {
        rgDeletedFavoriteItems.NeedDataSource += rgDeletedFavoriteItems_NeedDataSource;
        base.OnInit(e);
    }
    #endregion

    protected override void OnLoad(EventArgs e)
    {
        if (Heading.IsNullOrWhiteSpace())
            Heading = FavoritesDescription;

        base.OnLoad(e);
    }

    void rgDeletedFavoriteItems_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        string lastSku = string.Empty;

        List<FavoritesFactory.ChangedFaveItem> deletedList = new List<FavoritesFactory.ChangedFaveItem>();
        using (SqlCommand command = new SqlCommand("[dbo].[usp_ItemListDetailLogGetList]") { CommandType = CommandType.StoredProcedure })
        {
            command.Parameters.Add(new SqlParameter("@ItemListID", SqlDbType.UniqueIdentifier)).Value = FavoritesID;
            command.Parameters.Add(new SqlParameter("@ActionID", SqlDbType.VarChar)).Value = 6;     // delete actionid

            using (SqlBuilder sqlBuilder = new SqlBuilder())
            using (SafeDataReader reader = new SafeDataReader(sqlBuilder.ExecuteReader(command)))
                while (reader.Read())
                {
                    FavoritesFactory.ChangedFaveItem cfi = new FavoritesFactory.ChangedFaveItem
                    {
                        NewItemCompany = reader.GetString("NewItemCompany"),
                        NewItemNumber = reader.GetString("NewItemNumber"),
                        OldItemCompany = reader.GetString("OldItemCompany"),
                        OldItemNumber = reader.GetString("OldItemNumber")
                    };
                    if (lastSku != cfi.OldSku)
                    {
                        lastSku = cfi.OldSku;
                        deletedList.Add(cfi);
                    }
                }
        }
        rgDeletedFavoriteItems.DataSource = deletedList;
    }
}

[Svetlina Anati]

Hi Barry McMillen,

 
This behavior is caused by the fact the filtering menu is actually a RadContextMenu and its z-index is 7000 which is smaller than the one of the RadToolTip (8000). You can set proper z-indexes in order to get the desired behavior.

It is easier to set lower z - index to the RadToolTipManager in this scenario through the style property as shown below:

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Position="BottomLeft"
RelativeTo="Element" ShowEvent="OnClick" HideEvent="ManualClose" Animation="Fade"
OnAjaxUpdate="OnShowDeletedItems" Width="225px"
Style="z-index: 6999; font-size: 18px; text-align: left; font-family: Arial;">

 Information about the default RadControls' z-index values is available below:

http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html

I hope that the provided explanations and resources are helpful, let me know how it goes.

All the best,

Svetlina
the Telerik team

 

[Barry McMillen]

Thanks guys, worked like a charm.