height of Kendo grid within splitter

[Anamika]

Hello ,

i have 3 vertical panes in splitter and top one is nonresizable having search box. second and third contains datagrid , i want to have fixed height of second and third vertical panes and grid height to fit them even if no data. I cannot achieve this with htmlattiribute height.
@(Html.Kendo().Splitter()
.Name("vertical")
.Orientation(SplitterOrientation.Vertical)
.Panes(verticalPanes =>
{

verticalPanes.Add()
.Size("50px")
.HtmlAttributes(new { id = "bottom-pane"})
.Resizable(false)
.Collapsible(false)
.Content(@<text><div class="pane-content">Suchen:
@Html.TextBox("adrsearchbox")<input class="k-button" id="adressSearch" type="button" value="Suchen" />
<label><input type="checkbox" id="IsNew-checkbox" checked="checked" /> Archivierte Aufträge Anzeigen</label>
</div></text>);
verticalPanes.Add()
.Size("300px")
.HtmlAttributes(new { id = "middle-pane"})
.Collapsible(true)
.Resizable(true)
.Content(@<text>
@(Html.Kendo().Grid(Model)
.Name("Grid_Adress")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
if (Model != null)
{
foreach (System.Data.DataColumn column in Model.Columns)
{
model.Field(column.ColumnName, column.DataType);
}
}
})
.Read(read => read.Action("AdressSearch_Read", "Adress").Data("addSearch"))
.ServerOperation(false)
)
.Events(events => events.Change("onChange"))
.Columns(columns =>
{

for (int i = 0; i < ViewBag.ListHeader.GetLength(0); i++)
{
columns.Bound(ViewBag.ListHeader[i, 0]).Title(ViewBag.ListHeader[i, 1]);
}

})
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))

.Pageable(pageable => pageable
.PageSizes(true)
.ButtonCount(20))
)
</text>);
verticalPanes.Add()
.Size("300px")
.HtmlAttributes(new { id = "bottom-pane"})
.Resizable(true)
.Collapsible(true)
.Content(@<text>
@(Html.Kendo().Grid(Model)
.Name("Grid_Ansprache")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
if (Model != null)
{
foreach (System.Data.DataColumn column in Model.Columns)
{
model.Field(column.ColumnName, column.DataType);
}
}
})
.Read(read => read.Action("Ansprache_Read", "Adress"))
.ServerOperation(false)
)
.Columns(columns =>
{

for (int i = 0; i < ViewBag.AnspListHeader.GetLength(0); i++)
{
columns.Bound(ViewBag.AnspListHeader[i, 0]).Title(ViewBag.AnspListHeader[i, 1]);
}

})
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))

.Pageable(pageable => pageable
.PageSizes(true)
.ButtonCount(20))
)
</text>);

 })
)

How can i achieve it. When we have more records in grid it should show vertical scrollbar. Now my grids are touching each other

[Dimo]

Hello Anamika,

Setting a height to a Kendo UI Grid (or any other container with variable content) requires scrollability. So the first step is to enable Grid scrolling:

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/configuration#scrolling

The second step is to make the Grids 100% high:

http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#making-the-grid-100-high-and-auto-resizable

The 100% height style to a Grid <div> can be applied as an inline style with the Grid's .HtmlAttributes(), or via an external CSS rule, which uses the Grid's CSS class (.k-grid), or a custom CSS class, applied with .HtmlAttributes().

Regards,
Dimo
Telerik