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>
<kendo-window name="window"
title="Telerik UI Window"
resizable="true"
modal="true"
width="400"
height="250"
draggable="true">
</kendo-window>
<script id="template" type="text/html">
<kendo-splitter name="splitter"
orientation="SplitterOrientation.Horizontal"
is-in-client-template="true">
<pane collapsible="true">
left pane <br /><br /> Please resize the Window and watch the Splitter resize automatically.
</pane>
<pane collapsible="true">
right pane
</pane>
</kendo-splitter>
</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();
}
}