Dynamic Raddock - inside RadTab/MultipageView

2 posts, 0 answers
  1. Karthik A
    Karthik A avatar
    1 posts
    Member since:
    Jan 2014

    Posted 06 Jan 2014 Link to this post

    Hi,

    I am creating a new dashboard page with RadTabstrips and each tabs loading an individual set of Raddocks dynamically (these docks are movable and thier state are saved in the DB).
    The issue we are facing while trying to achieve this is since we are loading the Docks dynamically and maintainig its state through docklayout's loadstate and savestate method, we are suppose to add the dock back in Page_Init event.
    Also we can get the required dock details from DB based on current selected Tab only but we cannot get the selected tab index in Page_Init. If we get the selected index in page_load and add docks there then the state of the dock is not retained.

    Please suggest us a solution here, following are some of the code samples;
    Dashboard.aspx:

    <telerik:RadTabStrip runat="server" ID="RadTabStrip1" class="Dashboard" Orientation="HorizontalTop" EnableDragToReorder="true" OnTabClick="RadTabStrip1_TabClick" Skin="Outlook" OnReordered="RadTabStrip1_Reordered" MultiPageID="RadMultiPage1" OnClientTabSelecting="onClientTabSelecting" SelectedIndex="0">
                                </telerik:RadTabStrip>
                    
           
            <telerik:RadMultiPage class="Dashboard" ID="RadMultiPage1" runat="server" Width="100%" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated">
                <telerik:RadPageView ID="RadPageView1" runat="server">
                    <asp:Panel ID="Panel1" runat="server" BorderStyle="None" Width="100%">
                        <telerik:RadDockLayout runat="server" ID="RadDockLayout1"  OnSaveDockLayout="SaveDockLayout1_LoadDockLayout" StoreLayoutInViewState="true">
                            <telerik:RadDockZone runat="server" ID="LeftZone" BorderStyle="Solid" BorderWidth="0px" BorderColor="White" Width="25%" MinHeight="450px" Style="float: left; margin-right: 1px" Height="100%" Skin="Windows7">
                           
                             
                            </telerik:RadDockZone>
                            <telerik:RadDockZone runat="server" ID="MiddleZone" BorderStyle="Solid" BorderWidth="0px" BorderColor="Gray" Width="47%" MinHeight="450px" Style="float: left; margin-right: 1px" Height="100%" Skin="Windows7">
                           
                            </telerik:RadDockZone>
                            <telerik:RadDockZone runat="server" ID="RightZone" BorderStyle="Solid" BorderWidth="0px" BorderColor="White" Width="25%" MinHeight="450px" Style="float: left; margin-right: 1px" Height="100%" Skin="Windows7">
                            </telerik:RadDockZone>
                            <br style="clear: both;" />
                        </telerik:RadDockLayout>
                    </asp:Panel>
                </telerik:RadPageView>
            </telerik:RadMultiPage>

    Dashboard.aspx.cs:

    protected

     

     

    void Page_Init(object sender, EventArgs e)

     

    {

    RadDockLayout1.LoadDockLayout+=

     

    new DockLayoutEventHandler(RadDockLayout1_LoadDockLayout);

     

    AddDocksByPosition(0);

     


    }

    private void AddDefaultDocks(int position)

     

    {

    /*** Get list of docks from DB and load it to the Docklayout****/
    }

    protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)

     

    {

     

    System.Web.Script.Serialization.

     

    JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

     

     

     

    string serializedList = DockPostionstr;

     

     

     

    if (!string.IsNullOrEmpty(serializedList))

     

    {

     

     

    string[] states = serializedList.Split('|');

     

     

     

    foreach (string stringState in states)

     

    {

     

     

    if (stringState != string.Empty)

     

    {

     

     

    DockState state = serializer.Deserialize<DockState>(stringState);

     

    e.Positions[state.UniqueName] = state.DockZoneID;

    e.Indices[state.UniqueName] = state.Index;

    }

    }

    }

    }


     

     

     

    protected void SaveDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)

     

    {

     

     

    string dockState;

     

    System.Web.Script.Serialization.

     

    JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

     

     

     

    List<DockState> stateList = RadDockLayout1.GetRegisteredDocksState();

     

     

     

    StringBuilder serializedList = new StringBuilder();

     

     

     

    int i = 0;

     

     

     

    while (i < stateList.Count)

     

    {

    serializedList.Append(serializer.Serialize(stateList[i]));

    serializedList.Append(

     

    "|");

     

    i++;

    }

    dockState = serializedList.ToString();

    /***** DB call to save Dashboard state per Tab******/
    }

  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 08 Jan 2014 Link to this post

    Hi Karthik,

    As mentioned in this help article, the RadDock controls need to be created before the event RadDock.DockPositionChanged. Nevertheless, at this point the changed tab index is not loaded from the ViewState. What you can do is save the selected index on the client, for example in a hidden field ASP.NET control, and retrieve the value on the server.

    Another option is to change your implementation so all RadDocks are loaded, regardless of the selected tab. This way all of the docks will be recreated on each postback, however only the ones that are included in the currently displayed page view will be visible.

    Regards,
    Slav
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top