height of Kendo grid within splitter

2 posts, 0 answers
  1. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 21 Jul 2014 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 23 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top