SplitterSettings.ClientLayout Property

Enables you to save and restore the previously saved layout of the Splitter.

Namespace: DevExpress.Web.Mvc

Assembly: DevExpress.Web.Mvc5.v24.1.dll

NuGet Package: DevExpress.Web.Mvc5

Declaration

C#

public ASPxClientLayoutHandler ClientLayout { get; set; }

VB.NET

Public Property ClientLayout As ASPxClientLayoutHandler

Property Value

Type	Description
ASPxClientLayoutHandler	A ASPxClientLayoutHandler method to which custom processing is delegated.

Remarks

Provide custom implementation of the delegated method to save and restore the splitter’s layout from a data store.

• Save Layout

  The method parameter’s ASPxClientLayoutArgs.LayoutMode property returns ClientLayoutMode.Saving. The ASPxClientLayoutArgs.LayoutData property contains the Splitter’s current layout that should be saved, for example, to a database.

• Restore Layout

  The ASPxClientLayoutArgs.LayoutMode property returns ClientLayoutMode.Loading. Read the Splitter’s layout data from a data store and assign it to the ASPxClientLayoutArgs.LayoutData property.

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()