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 IActionResult Index()
        {
            return View();
        }
    }

See Also

In this article
Not finding the help you need? Improve this article