New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Persisting the Pane Size

The Splitter enables you to keep its pane size in percentage upon user resizes.

    @(Html.Kendo().Splitter()
        .Name("splitter")
        .Panes(panes=> {
            panes.Add().Collapsible(true).Size("20%");
            panes.Add().Collapsible(false);
        })
        .Events(e => { e.Resize("onResize"); })
    )

    <script>
            function onResize(e) {
                console.log(e.sender.options.panes);
                // Prevent endless recursion from resizes.
                if (!this.appliesSizes) {
                    this.appliesSizes = true;

                    // Calculate the pane width.
                    var element = this.element;
                    var pane = element.find(".k-pane:first");
                    var ratio = Math.ceil(pane.width() * 100 / element.width());

                    // set pane width in percentages
                    this.size(pane, ratio + "%");

                    this.appliesSizes = false;
                }
            }
    </script>
    public class SplitterController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

See Also

In this article