This is a migrated thread and some comments may be shown as answers.

Dock Undock Sliding pane and Menu Panel

7 Answers 213 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Lokesh
Top achievements
Rank 1
Lokesh asked on 09 Nov 2012, 01:36 PM
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.

7 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 12 Nov 2012, 07:56 AM
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.
0
Lokesh
Top achievements
Rank 1
answered on 19 Nov 2012, 06:52 AM
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.
0
Vessy
Telerik team
answered on 21 Nov 2012, 01:51 PM
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.
0
Lokesh
Top achievements
Rank 1
answered on 23 Nov 2012, 01:11 PM
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
0
Lokesh
Top achievements
Rank 1
answered on 23 Nov 2012, 01:20 PM

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

0
Accepted
Vessy
Telerik team
answered on 26 Nov 2012, 04:19 PM
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.
0
Lokesh
Top achievements
Rank 1
answered on 27 Nov 2012, 04:58 AM
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
Tags
Slider
Asked by
Lokesh
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Lokesh
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or