ASPxClientSplitter.GetLayoutData Method

Returns a string value that represents the client state of splitter panes.

Declaration

GetLayoutData(): string

Returns

Type	Description
string	A string that represents the splitter pane state.

Example

This example demonstrates how to preserve the MVC Splitter layout when an end-user expands, collapses or resizes its panes.  The Splitter extension is placed inside the CallbackPanel extension. In order to save its layout after a modification, you are required to handle corresponding client-side events and pass layout data to the server. This data is retrieved using the GetLayoutData method and passed as a parameter via the MVCxClientCallbackPanel.PerformCallback method to the server side to the corresponding Controller Action method. Then the client layout data is applied to Splitter in the ClientLayout event handler. server event.

Index.cshtml

@{
    ViewBag.Title = "MVC Splitter - How to save the client layout of the control after every modification by an end-user";
}

<h2>MVC Splitter - How to save the client layout of the control after every modification by an end-user</h2>
<script>
    var timerID = -1;
    function UpdateState(s, e) {
        if (timerID == -1) {
            timerID = setTimeout(
             function () {
                 CallbackPanel.PerformCallback({ layout: Splitter.GetLayoutData() });
                 timerID = -1;
             }, 0);
        }
    }
</script>
<a href="@Url.Action("Index","Home")" target="_blank">Open page in new window</a>
@Html.Action("CallbackPanelPartial")

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DXWebApplication1.Controllers
{
    public class HomeController : Controller {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        [HttpGet]
        public ActionResult CallbackPanelPartial()
        {

            return PartialView("_CallbackPanelPartial");
        }
        [HttpPost]
        public ActionResult CallbackPanelPartial(string layout)
        {

            Session["layout"] = layout;
            return PartialView("_CallbackPanelPartial");
        }

    }
}

_CallbackPanelPartial.cshtml

@Html.DevExpress().CallbackPanel(settings =>
{
    settings.Name = "CallbackPanel";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "CallbackPanelPartial" };
    settings.Width = Unit.Percentage(100);
    settings.Height = 500;
    settings.SetContent(() => {
        @Html.DevExpress().Splitter(splitter =>
        {
            splitter.Name = "Splitter";
            splitter.Height = 400;
            splitter.Width = System.Web.UI.WebControls.Unit.Percentage(100);
            splitter.AllowResize = true;
            splitter.ShowCollapseBackwardButton = true;
            splitter.ShowCollapseForwardButton = true;
            splitter.ClientLayout = (s, e) =>
            {
                if (Session["layout"] != null)
                {
                    e.LayoutData = (string)Session["layout"];
                }
            };
            for (int i = 0; i < 4; i++)
            {
                MVCxSplitterPane pane = new MVCxSplitterPane("Pane" + i);
                pane.SetContent(() => { ViewContext.Writer.Write("Content"); });
                splitter.Panes.Add(pane);
            }
            splitter.ClientSideEvents.PaneCollapsed = splitter.ClientSideEvents.PaneResizeCompleted = splitter.ClientSideEvents.PaneExpanded = "UpdateState";

        }).Render();
    });
}).GetHtml()