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

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("window")
        .Title("Telerik UI Window")
        .Resizable()
        .Modal(true)
        .Width(400)
        .Height(250)
        .Draggable(true)
    )

    <script id="template" type="text/x-kendo-template">
        @(Html.Kendo().Splitter()
            .Name("splitter")
            .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());
            $("#window").append(template({}));
            $("#window").data("kendoWindow").center();
        })
    </script>

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

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

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

See Also

In this article