Dock Undock Sliding pane and Menu Panel

8 posts, 1 answers
  1. Lokesh
    Lokesh avatar
    7 posts
    Member since:
    Nov 2012

    Posted 09 Nov 2012 Link to this post

    Hi,

    I am facing an issue on undocking sliding pane as left side bar. The right side having a menu panel. On hovering sliding pane does not cover (overlapp) the menu panel. Rest of the pane covers the right hand side but only the menu panel. 

    This is happening while we are upgrading the telerik controls from 2008 version to 2012 version. All the issues of have been resolved but this.

    The z-index of the menu penal is getting applied though new telerik DLL and the value is 7000, while the sliding pane is having 2000 z-index. Again getting applied through new telerik DLL. We tried to override the z-index but it doesn't get overridden. Any help is much appreciated.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Nov 2012 Link to this post

    Hi Lokesh,

    I suppose you want a RadSlidingPane to overlap a RadMenu. Here is the sample code that I tried which works as expected.

    ASPX:
    <telerik:RadMenu ID="RadMenu1" runat="server" CssClass="MenuCss" >
       <Items>
         <telerik:RadMenuItem Text="item"></telerik:RadMenuItem>
         <telerik:RadMenuItem Text="item"></telerik:RadMenuItem>
         <telerik:RadMenuItem Text="item"></telerik:RadMenuItem>
      </Items>
    </telerik:RadMenu>

    CSS:
    <style type="text/css">
     .MenuCss
     {
       z-index:1900!important;
     }
    </style>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lokesh
    Lokesh avatar
    7 posts
    Member since:
    Nov 2012

    Posted 19 Nov 2012 Link to this post

    Princy, Thanks for the reply.

    Yes I want exactly that. Overlapping the sliding pane on menu panel on undocking it.
    However, I changed the z-index of rad sliding panel and rad menu, simultaneously and separately but that does not work.

    I also noticed that default code works just fine in IE9, Chrome and Firefox. It is a problem in IE7 and IE8.

    Thanks.
  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 21 Nov 2012 Link to this post

    Hi Lokesh,

    I tested the provided by Princy code, but everything is working as expected on our side even in IE8 and IE7.

    For your convenience I am attaching my test page - could you examine it an tell me if you reproduce the issue with it? If no, could you modify it to a point where the problem occurs and send it back? For my test I used the latest version of RadControls (2012.3.1016).

    Kind regards,
    Vesi
    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.
  6. Lokesh
    Lokesh avatar
    7 posts
    Member since:
    Nov 2012

    Posted 23 Nov 2012 Link to this post

    Dear Vesi,

    Thanks for the reply.

    Please find below my code snippet which is not working in IE7, IE8(Compatibility View), IE9(Compatibility View), that is menu items are appearing over the sliding pane on undocking.

    Also, If we remove the applied CSS class ( CssClass="MenuCss") from (<telerik:RadMenu ID="RadMenu1"), this does not work in any browser in any mode, that is menu items appearing over the sliding pane. However after applying this CSS; IE7, IE8(Compatibility View), IE9(Compatibility View) still don't work.

    I am using the Telerik.Web.UI, v.2012.2.724.35 version.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <style type="text/css">
         .MenuCss
         {
           z-index:1900!important;
         }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadSplitter ID="RadSplitterHome" runat="server" Orientation="horizontal" ResizeWithBrowserWindow="true"
                ResizeWithParentPane="true" VisibleDuringInit="true"
                Height="300" Width="1000">
                <telerik:RadPane ID="RadPaneClient" runat="server" Height="100%" Scrolling="None">
                    <telerik:RadSplitter ID="RadSplitterClient" runat="server" Width="100%" Height="100%"
                        Orientation="vertical" ResizeWithParentPane="true" LiveResize="true">
                        <telerik:RadPane ID="RadPaneTree" MaxWidth="500" runat="server" Width="24" Style="width: 23px;">
                            <div id="treeDiv" style="position: absolute; height: 70%;">
                                <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="23" SlideDirection="Right"
                                    DockedPaneId="RadSlidingPaneTree">
                                    <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Width="220" Scrolling="Y"
                                        ToolTip="First" Title="First" IconUrl="~/Images/First.gif"
                                         TabView="ImageOnly" EnableDock="true">
                                        <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="96%">
                                        </telerik:RadTreeView>
                                    </telerik:RadSlidingPane>
                                    <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Width="220" Scrolling="Y"
                                        ToolTip="Second" Title="Second" IconUrl="~/Images/Second.gif"
                                        TabView="ImageOnly">
                                        <telerik:RadTreeView ID="RadTreeView2" runat="server" Height="96%">
                                        </telerik:RadTreeView>
                                    </telerik:RadSlidingPane>
                              </telerik:RadSlidingZone>
                            </div>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="split" runat="server" EnableViewState="true" CollapseMode="forward" />
                        <telerik:RadPane ID="RadPaneContentArea" runat="server" Height="100%" Scrolling="none">
                            <telerik:RadSplitter ID="RadSplitterContentArea" runat="server" Width="100%" Height="100%"
                                Orientation="Horizontal" ResizeWithParentPane="true" LiveResize="true">
                                <telerik:RadPane ID="RadPaneToolbar" runat="server" Height="34px" Scrolling="none">
                                    <div id="menuDiv" style="width: 85%; height: 7%;">
                                        <telerik:RadMenu ID="RadMenu1" runat="server" CssClass="MenuCss">
                                           <Items><telerik:RadMenuItem ImageUrl="Images/save.jpg"></telerik:RadMenuItem></Items>
                                           <Items><telerik:RadMenuItem ImageUrl="Images/print.jpg"></telerik:RadMenuItem></Items>
                                        </telerik:RadMenu>
                                    </div>
                                </telerik:RadPane>
                                <telerik:RadPane ID="RadPaneContent" runat="server" Scrolling="Both">
                                </telerik:RadPane>
                                <telerik:RadPane ID="RadPaneInformation" runat="server" Height="1" Scrolling="None">
                                    <telerik:RadSlidingZone ID="RadSlidingZoneInfo" runat="server" Height="1" SlideDirection="Top"
                                        ClickToOpen="true">
                                        <telerik:RadSlidingPane ID="RadSlidingPaneInfo" runat="server" Height="200" EnableResize="true"
                                            Scrolling="none" EnableDock="true">
                                            <telerik:RadSplitter ID="RadSplitterSlide" runat="server" Width="100%">
                                                <telerik:RadPane ID="RadPaneSlide" runat="server">
                                                </telerik:RadPane>
                                            </telerik:RadSplitter>
                                        </telerik:RadSlidingPane>
                                    </telerik:RadSlidingZone>
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
        </form>
    </body>
    </html>


    Your early reply is very much appreciated.

    Thanks,
    Lokesh
  7. Lokesh
    Lokesh avatar
    7 posts
    Member since:
    Nov 2012

    Posted 23 Nov 2012 Link to this post

    Dear Vesi,

    Thanks for the reply.

    Please find below my code snippet which is not working in IE7, IE8(Compatibility View), IE9(Compatibility View), that is menu items are appearing over the sliding pane on undocking.

    Also, If we remove the applied CSS class ( CssClass="MenuCss") from (<telerik:RadMenu ID="RadMenu1"), this does not work in any
    browser in any mode, that is menu items appearing over the sliding pane. However after applying this CSS; IE7, IE8(Compatibility View), IE9(Compatibility View) still don't work.

    I am using the Telerik.Web.UI, v.2012.2.724.35 version.


    <telerik:RadSplitter ID="RadSplitterHome" runat="server" Orientation="horizontal" ResizeWithBrowserWindow="true"
        ResizeWithParentPane="true" VisibleDuringInit="true"
        Height="300" Width="1000">
        <telerik:RadPane ID="RadPaneClient" runat="server" Height="100%" Scrolling="None">
            <telerik:RadSplitter ID="RadSplitterClient" runat="server" Width="100%" Height="100%"
                Orientation="vertical" ResizeWithParentPane="true" LiveResize="true">
                <telerik:RadPane ID="RadPaneTree" MaxWidth="500" runat="server" Width="24" Style="width: 23px;">
                    <div id="treeDiv" style="position: absolute; height: 70%;">
                        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="23" SlideDirection="Right"
                            DockedPaneId="RadSlidingPaneTree">
                            <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Width="220" Scrolling="Y"
                                ToolTip="First" Title="First" IconUrl="~/Images/First.gif"
                                 TabView="ImageOnly" EnableDock="true">
                                <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="96%">
                                </telerik:RadTreeView>
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Width="220" Scrolling="Y"
                                ToolTip="Second" Title="Second" IconUrl="~/Images/Second.gif"
                                TabView="ImageOnly">
                                <telerik:RadTreeView ID="RadTreeView2" runat="server" Height="96%">
                                </telerik:RadTreeView>
                            </telerik:RadSlidingPane>
                      </telerik:RadSlidingZone>
                    </div>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="split" runat="server" EnableViewState="true" CollapseMode="forward" />
                <telerik:RadPane ID="RadPaneContentArea" runat="server" Height="100%" Scrolling="none">
                    <telerik:RadSplitter ID="RadSplitterContentArea" runat="server" Width="100%" Height="100%"
                        Orientation="Horizontal" ResizeWithParentPane="true" LiveResize="true">
                        <telerik:RadPane ID="RadPaneToolbar" runat="server" Height="34px" Scrolling="none">
                            <div id="menuDiv" style="width: 85%; height: 7%;">
                                <telerik:RadMenu ID="RadMenu1" runat="server" CssClass="MenuCss">
                                   <Items><telerik:RadMenuItem ImageUrl="Images/save.jpg"></telerik:RadMenuItem></Items>
                                   <Items><telerik:RadMenuItem ImageUrl="Images/print.jpg"></telerik:RadMenuItem></Items>
                                </telerik:RadMenu>
                            </div>
                        </telerik:RadPane>
                        <telerik:RadPane ID="RadPaneContent" runat="server" Scrolling="Both">
                        </telerik:RadPane>
                        <telerik:RadPane ID="RadPaneInformation" runat="server" Height="1" Scrolling="None">
                            <telerik:RadSlidingZone ID="RadSlidingZoneInfo" runat="server" Height="1" SlideDirection="Top"
                                ClickToOpen="true">
                                <telerik:RadSlidingPane ID="RadSlidingPaneInfo" runat="server" Height="200" EnableResize="true"
                                    Scrolling="none" EnableDock="true">
                                    <telerik:RadSplitter ID="RadSplitterSlide" runat="server" Width="100%">
                                        <telerik:RadPane ID="RadPaneSlide" runat="server">
                                        </telerik:RadPane>
                                    </telerik:RadSplitter>
                                </telerik:RadSlidingPane>
                            </telerik:RadSlidingZone>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>

     

    Your early reply is very much appreciated.

    Thanks,
    Lokesh

  8. Answer
    Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 26 Nov 2012 Link to this post

    Hi Lokesh,

    After a further investigation it turn out that the provided style does not work, because of the "position:absolute" style, applied to the div with id="treeView". Note, that when you are using a SlidingZone, there shouldn't be any other wrapping element between the SlidingZone and its parent RadPane:
    <%--<div id="treeDiv" style="position: absolute; height: 70%;">--%>
        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="23" SlideDirection="Right" DockedPaneId="RadSlidingPaneTree" Height="70%">
         ...
        </telerik:RadSlidingZone>
    <%--</div>--%>

    For your convenience I am attaching the modified project.

    Regards,
    Vesi
    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.
  9. Lokesh
    Lokesh avatar
    7 posts
    Member since:
    Nov 2012

    Posted 26 Nov 2012 Link to this post

    Thanks Vesi for the resolution. Though, I just figure it out yesterday only. Narrowing down the application to the page level helped me figured it out.

    We never looked in that division as it was working just fine in previous versions of Telerik controls. 

    Thanks much for your help, we now completed the upgradation/migration of Telerik controls from 2008 version to 2012 version :)

    Lokesh
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017