Setting zIndex of RadDocks

3 posts, 1 answers
  1. Nicolas
    Nicolas avatar
    57 posts
    Member since:
    Dec 2008

    Posted 11 Jun 2009 Link to this post

    Hi,

    I'm currently using 5 RadDocks placed in a RadDockZone. They are declared in the front code and I use code-behind functions to save and load their state when needed.

    Right now, if I move dock A atop of dock B, dock A stays behind dock B (assuming dock B started with a higher zIndex). What I would like, is having a dock being moved over another dock to get in front of it. Actually, even just clicking on a dock (more exactly on its title bar) should "bring it to front".

    Additionally, this order needs to be saved/loaded just like the dock state.

    Is there an (easy) way to accomplish this (client-side preferred of course)?

    You'll find below code relevant to the save/load processes as well as the docks declaration.

    Thanks in advance,
    Nicolas



        Protected Sub SaveDockLayout() 
            Dim tConnection As New SqlConnection(ConfigurationManager.ConnectionStrings("Infinis_Connection").ConnectionString) 
     
            Dim tDockState As String 
            Dim tSerializer As New Script.Serialization.JavaScriptSerializer() 
            Dim tConverters As New List(Of Script.Serialization.JavaScriptConverter)() 
            tConverters.Add(New UnitConverter()) 
            tSerializer.RegisterConverters(tConverters) 
     
            Dim tStateList As List(Of DockState) = docks_DockLayout.GetRegisteredDocksState() 
            Dim tSerializedList As New StringBuilder() 
            Dim i As Integer = 0 
     
            While i < tStateList.Count 
                tSerializedList.Append(tSerializer.Serialize(tStateList(i))) 
                tSerializedList.Append("|"
                System.Math.Max(System.Threading.Interlocked.Increment(i), i - 1) 
            End While 
     
            tDockState = tSerializedList.ToString() 
            If tDockState.Trim() <> [String].Empty Then 
                Try 
                    tConnection.Open() 
                    Dim tCommand As New SqlCommand([String].Format("UPDATE SystemUser set DocksPosition='{0}' WHERE RecId = {1}", tDockState, Session("CurrentSession_UserId")), tConnection) 
                    tCommand.ExecuteNonQuery() 
                    tConnection.Close() 
                Catch 
                End Try 
            End If 
        End Sub 

        Protected Sub LoadDockLayout() 
            Dim tConnection As New SqlConnection(ConfigurationManager.ConnectionStrings("Infinis_Connection").ConnectionString) 
     
            Dim tDock As RadDock = Nothing 
            Dim tSerializer As New Script.Serialization.JavaScriptSerializer() 
            Dim tConverters As New List(Of Script.Serialization.JavaScriptConverter)() 
            tConverters.Add(New UnitConverter()) 
            tSerializer.RegisterConverters(tConverters) 
     
            'Get saved state string from the database - set it to dockState variable for example  
            Dim tDockState As String = "" 
            Try 
     
                tConnection.Open() 
                Dim tCommand As New SqlCommand("SELECT DocksPosition FROM SystemUser WHERE RecId = @RecId", tConnection) 
                tCommand.Parameters.AddWithValue("RecId", Session("CurrentSession_UserId")) 
                tDockState = tCommand.ExecuteScalar().ToString() 
                tConnection.Close() 
            Catch 
            End Try 
     
            Dim tCurrentDockStates As String() = tDockState.Split("|"c) 
            For Each tStringState As String In tCurrentDockStates 
                If tStringState.Trim() <> String.Empty Then 
                    Dim tState As DockState = tSerializer.Deserialize(Of DockState)(tStringState) 
                    tDock = DirectCast(docks_DockLayout.FindControl(tState.UniqueName), RadDock) 
                    tDock.ApplyState(tState) 
                End If 
            Next 
        End Sub 

            <telerik:RadDockLayout runat="server" ID="docks_DockLayout" EnableViewState="false" StoreLayoutInViewState="false"
                     
                <telerik:RadDockZone runat="server" ID="docks_Dockzone" Orientation="Vertical" MinWidth="300px" MinHeight="500px" Style="position:absolute; top:30px; left:0px;"
                 
                    <telerik:RadDock ID="dock_Product" runat="server" Width="300px" Height="200px" Top="200px" ExpandedHeight="200" 
                        Left="200px" Title="Products" CssClass="style_DockPanels" Skin="Black" 
                         Resizable="true" DefaultCommands="All" Closed="false" Collapsed="true" OnClientCommand="DockProduct_ClientCommand" > 
                        <ContentTemplate> 
                            <telerik:RadTreeView ID="tree_Product" Height="100%" Width="100%" runat="server" 
                                OnNodeExpand="tree_NodeExpand"  
                                ShowLineImages="true"  
                                EnableDragAndDrop="true" 
                                EnableDragAndDropBetweenNodes="false" 
                                Skin="Black"  
                                SingleExpandPath="true" 
                                LoadingStatusPosition="AfterNodeText"  
                                OnClientNodeDropping="Tree_NodeDropping" OnClientNodeDragStart="Tree_NodeDragStart" /> 
                        </ContentTemplate> 
                    </telerik:RadDock> 
     
                    [there's 4 others just like that] 
  2. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 17 Jun 2009 Link to this post

    Hi Nicolas,

    I have created a sample project, that will help you implement the desired functionality in your project.
    It implements three event handler methods that set the z-index of the selected dock so it is higher than the z-index of every other dock. Below is the project's source code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SettingZ_Index219076._Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title></title
        <script type="text/javascript"
            var maxZIndex; 
            function OnInitialize(dock, args) 
            { 
                //this method finds the highest z-index 
                var dockdocks = dock.get_dockZone().get_docks(); 
                maxZIndex = dock.get_element().style.zIndex; 
                for (i = 0; i < docks.length; i++) 
                { 
                    var dockElement = docks[i].get_element(); 
                    var currentIndex = dockElement.style.zIndex; 
                    if (currentIndex > maxZIndex) 
                    { 
                        maxZIndex = currentIndex
                    } 
                } 
                 
            } 
            function OnDragStart(dock, args) 
            { 
                //this method increases the highest z-index 
                maxZIndex = parseInt(maxZIndex) + 1; 
            } 
            function OnDragEnd(dock, args) 
            { 
                //this method sets the new increased z-index to the current dock 
                dock.get_element().style.zIndex = maxZIndex
            } 
        </script> 
         
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <div> 
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server"
                <telerik:RadDockZone ID="RadDockZone1" runat="server"
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Height="200px" Top="200px" ExpandedHeight="200"  
                        Left="200px" Title="Products1" Skin="Black"  
                         Resizable="true" DefaultCommands="All" Closed="false" Collapsed="true" 
                         OnClientInitialize="OnInitialize" OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd"
                    </telerik:RadDock> 
                    <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Height="200px" Top="200px" ExpandedHeight="200"  
                        Left="200px" Title="Products2" Skin="Black"  
                         Resizable="true" DefaultCommands="All" Closed="false" Collapsed="true" 
                         OnClientInitialize="OnInitialize" OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd"
                    </telerik:RadDock> 
                    <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Height="200px" Top="200px" ExpandedHeight="200"  
                        Left="200px" Title="Products3" Skin="Black"  
                         Resizable="true" DefaultCommands="All" Closed="false" Collapsed="true" 
                         OnClientInitialize="OnInitialize" OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd"
                    </telerik:RadDock> 
                    <telerik:RadDock ID="RadDock4" runat="server" Width="300px" Height="200px" Top="200px" ExpandedHeight="200"  
                        Left="200px" Title="Products4" Skin="Black"  
                         Resizable="true" DefaultCommands="All" Closed="false" Collapsed="true" 
                         OnClientInitialize="OnInitialize" OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd"
                    </telerik:RadDock> 
                    <telerik:RadDock ID="RadDock5" runat="server" Width="300px" Height="200px" Top="200px" ExpandedHeight="200"  
                        Left="200px" Title="Products5" Skin="Black"  
                         Resizable="true" DefaultCommands="All" Closed="false" Collapsed="true" 
                         OnClientInitialize="OnInitialize" OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd"
                    </telerik:RadDock> 
                </telerik:RadDockZone> 
            </telerik:RadDockLayout> 
        </div> 
        </form> 
    </body> 
    </html> 
     
     
    The idea behind the example is:
         1) Find the highest z-index of the RadDocks on the OnClientInitialize event
         2) Increase it on the OnClientDragStart event
         3) And set it to the z-index of the dragged dock, on the OnClientDragEnd event


    Sincerely yours,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Nicolas
    Nicolas avatar
    57 posts
    Member since:
    Dec 2008

    Posted 20 Jun 2009 Link to this post

    Thank you for your reply.

    You got me on the right track, however I couldn't continuously increment 1 each time, so I got a solution a little bit different that works fine.

    function OnDocksDragEnd(pDock, pArgs) { 
        // Get dock panels  
        var tDockProduct = $find('dock_Product'); 
        var tDockGeography = $find('dock_Geography'); 
        var tDockPeople = $find('dock_People'); 
        var tDockCustomer = $find('dock_Customer'); 
        var tDockCompany = $find('dock_Company'); 
         
        tDockProduct.get_element().style.zIndex = tDocksZIndex; 
        tDockGeography.get_element().style.zIndex = tDocksZIndex; 
        tDockPeople.get_element().style.zIndex = tDocksZIndex; 
        tDockCustomer.get_element().style.zIndex = tDocksZIndex; 
        tDockCompany.get_element().style.zIndex = tDocksZIndex; 
         
        pDock.get_element().style.zIndex = tDocksZIndex + 1;  
    }  

    Thanks


Back to Top