Auto-Resizing to Content
You can expand the height of the Splitter based on the content inside a pane.
- Set up the Splitter to expand to the height of its parent according to the article on how to expand to 100% height and auto-resize.
- Make sure that the parent content is resized when the content of the pane is rendered.
- Call the
resizemethod to finalize the process.
@(Html.Kendo().Splitter()
.Name("vertical")
.Orientation(SplitterOrientation.Horizontal)
.Panes(verticalPane =>
{
verticalPane.Add().Collapsible(true).Content("<div id='grid'></div>");
verticalPane.Add().Collapsible(true);
})
)
@(Html.Kendo().Grid<CoreDocumentationSplitter.Models.Products>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
})
.DataSource(dataSource => dataSource
.Custom()
.Batch(true)
.Schema(schema => schema.Model(m => m.Id(p => p.ProductID)))
.Transport(transport =>
{
transport.Read(read =>
read.Url("https://demos.telerik.com/kendo-ui/service/products")
.DataType("jsonp")
);
})
)
.Events(e => { e.DataBound("onDataBound"); })
)
<script>
function onDataBound(e) {
var gridHeight = e.sender.wrapper.outerHeight() + e.sender.wrapper.outerHeight() - e.sender.wrapper.height();
$(document).find("body").height(gridHeight);
var splitter = $("#vertical").data("kendoSplitter");
splitter.resize(true);
}
</script>
<style>
html,
body,
main,
#vertical,
.container
{
height: 100%;
margin: 0;
padding: 0;
}
</style>
<kendo-splitter name="vertical" orientation="SplitterOrientation.Horizontal">
<pane collapsible="true">
<div id='grid'></div>
</pane>
<pane collapsible="true"></pane>
</kendo-splitter>
<kendo-grid name="grid" on-data-bound="onDataBound">
<columns>
<column field="ProductName"/>
</columns>
<datasource type="DataSourceTagHelperType.Custom" batch="true">
<schema>
<model id="ProductID"></model>
</schema>
<transport>
<read url="https://demos.telerik.com/kendo-ui/service/products" datatype="jsonp" />
</transport>
</datasource>
</kendo-grid>
<script>
function onDataBound(e) {
var gridHeight = e.sender.wrapper.outerHeight() + e.sender.wrapper.outerHeight() - e.sender.wrapper.height();
$(document).find("body").height(gridHeight);
var splitter = $("#vertical").data("kendoSplitter");
splitter.resize(true);
}
</script>
<style>
html,
body,
main,
#vertical,
.container
{
height: 100%;
margin: 0;
padding: 0;
}
</style>
public class SplitterController : Controller
{
public ActionResult Index()
{
return View();
}
}
public class Products
{
public string ProductID { get; set; }
public string ProductName { get; set; }
public decimal UnitPrice { get; set; }
}