Erobo Software | Scripts: C# | Saving / Loading the Position of RadDocks on a Telerik RadDockZone using AJAX

Scripts: C# :: Telerik Web Controls :: Library Article #13

Developer's Section

Saving / Loading the Position of RadDocks on a Telerik RadDockZone using AJAX
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr

Rating: \| Rate It:
Average Votes: (3739)
Favorites:

Learn how to load and save the positions of RadDock elements on a RadDockZone using Telerik's RadAjaxManager and the creation of an ajax request delegate.

One easy way to save the positions of the RadDocks on a RadDockZone is to use the client side event OnClientDockPositionChanged. If used with a RadAjaxManager, then you can contact the server to make an ajax call and tell the system what the position coordinates are. This will include all RadDocks IDs, Indexes and their respective RadDockZones e.g. dockZone ID. Then on the code behind, the OnLoadDockLayout event can retrieve this data and reorganize the positions of the RadDocks accordingly by changing the values on the coordinates arrays e.g. e.Indices (For Index) , e.Positions (For DockZoneID).

Code for: layout.aspx

	Code Snippet 1

<%@ Page Title="" Language="C#" AutoEventWireup="true"
CodeBehind="layout.aspx.cs" Inherits="Dev.Layout" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI"
tagprefix="telerik" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"></head>
<body>
  <form id="form1" runat="server">
  <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
  </telerik:RadScriptManager>
  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
  </telerik:RadAjaxManager>

  
  <telerik:RadDockLayout ID="RadDockLayout1" Runat="server"
  OnLoadDockLayout="RadDockLayout1_LoadDockLayout">
  <table id="table_dock_start">
    <tr>
      <td style="vertical-align: top">
      <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="400px"
      Orientation="Vertical"
      Width="375px" BorderWidth="0px">

      <telerik:RadDock ID="RadDock1" runat="server" EnableAnimation="true"
      Title="Dock 1" EnableRoundedCorners="true" Height="162" Resizable="true"
      Width="370px"
      OnClientDockPositionChanged="savePos">
      <TitlebarTemplate>
      Movable Box 1
      </TitlebarTemplate>
      <ContentTemplate>
      Movable Box Code Body
      </ContentTemplate>
      </telerik:RadDock>

      <telerik:RadDock ID="RadDock2" runat="server" EnableAnimation="true"
      Title="Dock 1" EnableRoundedCorners="true" Height="162" Resizable="true"
      Width="370px"
      OnClientDockPositionChanged="savePos">
      <TitlebarTemplate>
      Movable Box 1
      </TitlebarTemplate>
      <ContentTemplate>
      Movable Box Code Body
      </ContentTemplate>
      </telerik:RadDock>
      </telerik:RadDockZone>
      <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="400px"
      Orientation="Vertical"
      Width="375px" BorderWidth="0px">

      <telerik:RadDock ID="RadDock3" runat="server" EnableAnimation="true"
      Title="Dock 1" EnableRoundedCorners="true" Height="162" Resizable="true"
      Width="370px"
      OnClientDockPositionChanged="savePos">
      <TitlebarTemplate>
      Movable Box 1
      </TitlebarTemplate>
      <ContentTemplate>
      Movable Box Code Body
      </ContentTemplate>
      </telerik:RadDock>

      <telerik:RadDock ID="RadDock4" runat="server" EnableAnimation="true"
      Title="Dock 1" EnableRoundedCorners="true" Height="162" Resizable="true"
      Width="370px"
      OnClientDockPositionChanged="savePos">
      <TitlebarTemplate>
      Movable Box 1
      </TitlebarTemplate>
      <ContentTemplate>
      Movable Box Code Body
      </ContentTemplate>
      </telerik:RadDock>
      </telerik:RadDockZone>
      </td>
    </tr>
   </table>
  </telerik:RadDockLayout>
  <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
    <script type="text/javascript">

    var radManagerForDockBoxes = null;
    //use literal to get all raddock positions, zones, and indexes
    var radDockStartPos = '<asp:Literal id="DocksStartPosLit" runat="server" />';

    function savePos(thisDock) {
      //Get reference to the RadDockZone from the dock
      //send telerik dockstate coordinates to server using ajax

      var thisD = thisDock.get_parent();

      if (thisD != null) {

        var dockArguments = "Save:";

        //loop throught the docks and record arguments

        for (var x = 0; x < thisD.get_docks().length; x++) {
          dock = thisD.get_docks()[x];
          dockArguments = dockArguments + dock.get_uniqueID() +
                                        "," + dock.get_dockZoneID() +
                                        "," + dock.get_index() + ";";
        }

        dockArguments = dockArguments.substring(0, dockArguments.length - 1);

        if (radManagerForDockBoxes == null) {
          //get reference to the ajax manager
          radManagerForDockBoxes=$find("<%=RadAjaxManager.GetCurrent(this).ClientID%>");


        }
        //Fire ajax request (optionally pass an event arg value)
        radManagerForDockBoxes.ajaxRequest(dockArguments);

      }
    }

    </script>
  </telerik:RadCodeBlock>
  </form>
</body>
</html>

Code for: layout.aspx.cs

	Code Snippet 2

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using MyCustomLibrary;

namespace Dev.Layout
{
  public partial class Layout : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      //Create a new ajax delegate to tell the ajax manager which method to call
      //when saving the RadDocks

      RadAjaxManager.GetCurrent(this).AjaxRequest += new RadAjaxControl.AjaxRequestDelegate

(AjaxRequestSaveDocks);

    }

    //Ajax method to save the positions
    private void AjaxRequestSaveDocks(object sender, AjaxRequestEventArgs e)
    {

      string[] RadDockCoor = null; //array to get coordinates
      string[] CallInstr = null;   //array to get call instructions
      string[] CallargArr = null;  //array to get parsed arguments

      if (e.Argument.IndexOf("Save:") > -1)
      {

        CallInstr = e.Argument.Split(':');
        CallargArr = CallInstr[1].Split(';');

        for (var x = 0; x < CallargArr.Length; x++)
        {

          RadDockCoor = CallargArr[x].Split(',');

          string a = (FindControl(RadDockCoor[0]) as RadDock).ID; // Dock ID
          string b = (FindControl(RadDockCoor[0]) as RadDock).DockZoneID.IndexOf("RadDockZone1") > -1
          ? "RadDockZone1" : "RadDockZone2"; //Dock Zone
          string c = RadDockCoor[2]; //Dock Index

          TList<Dockzonebox> thisDocZoneBox = Mylib.GetDockByArgs(a,b,c);

          if (thisDocZoneBox.Count > 0)
          {
            //update
            MyLib.UpdateDock(a,b,c);
          }
          else
          {
            //insert
            MyLib.InsertDock(a,b,c);
          }
        }
      }

      protected void RadDockLayout1_LoadDockLayout(object sender, Telerik.Web.UI.DockLayoutEventArgs e)
      {

        foreach (RadDock dock in RadDockLayout1.RegisteredDocks)
        {
          dock.UniqueName = dock.ID;
        }

        foreach (RadDock dock in RadDockLayout1.RegisteredDocks)
        {
          TList<Dockzonebox> thisDocZoneBox = Mylib.GetDock(dock);

          if (thisDocZoneBox.Count > 0)
          {
            Dockzonebox newDockZoneBox = thisDocZoneBox[0];

            e.Indices[dock.UniqueName] = newDockZoneBox.DockZoneBoxPosition;

            if (newDockZoneBox.DockZoneId.IndexOf("RadDockZone1") > -1)
            {
              e.Positions[dock.UniqueName] = RadDockZone1.ClientID;
            }
            else if (newDockZoneBox.DockZoneId.IndexOf("RadDockZone2") > -1)
            {
              e.Positions[dock.UniqueName] = RadDockZone2.ClientID;
            }

          }
        }
      }
   }
}

See other Scripts in Telerik Web Controls

Submit Your Scripts:

If you would like to have your Javascripts published in this section please fill out
the form below: