Filter menu appearing behind Radgrid

3 posts, 0 answers
  1. Barry McMillen
    Barry McMillen avatar
    4 posts
    Member since:
    Feb 2010

    Posted 24 May 2011 Link to this post

    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;
        }
    }
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 25 May 2011 Link to this post

    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

     

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Barry McMillen
    Barry McMillen avatar
    4 posts
    Member since:
    Feb 2010

    Posted 25 May 2011 Link to this post

    Thanks guys, worked like a charm.
Back to Top