Setting zIndex of RadDocks

[Nicolas]

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]

[Pero]

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.

[Nicolas]

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