Auto-Resizing to Window

You can add a Splitter that resizes automatically along with the Kendo UI for jQuery Window widget.

    @(Html.Kendo().Window()
                    .Name("win")
                    .Title("Kendo UI Window")
                    .Modal(true)
                    .Width(400)
                    .Height(250)
                    .Draggable(true)

    )

<script id="template" type="text/x-kendo-template">
    @(Html.Kendo().Splitter()
                    .Name("vertical")
                    .Orientation(SplitterOrientation.Horizontal)
                    .Panes(verticalPane =>
                    {
                        verticalPane.Add().Collapsible(true).Content("left pane <br /><br /> Please resize the Window and watch the Splitter resize automatically.");
                        verticalPane.Add().Collapsible(true).Content("right pane");
                    })
                    .ToClientTemplate()
    )
</script>

<script>
    $(function () {
        var template = kendo.template($("#template").html());
        $("#win").append(template({}));
        $("#win").data("kendoWindow").center();
    })
</script>

<style>
    html {
        font: 12px sans-serif;
    }

    #splitter {
        border-width: 0;
        height: 100%;
    }

    #win {
        padding: 0;
        overflow: hidden;
    }
</style>
    public class SplitterController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }

See Also

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