How to change the height of Kendo ui Grid

Question

How do I change the height of the Kendo Grid when using wrappers?

Answer 1

I assume the method you are looking for is under the Scrollable configuration (it is there because one Grid needs to be scrollable if you want it to have height)

.Scrollable(scr=>scr.Height(230))

Answer 2

To change height dynamically

remove htmlattributes:

.HtmlAttributes(new { style = "height:600px;" })

Add scrollable with auto:

.Scrollable(a => a.Height("auto"))

Answer 3

HtmlAttributes() will let you add attributes to the <div> that holds the toolbars, paging, table, etc.

TableHtmlAttributes() will let you add attributes to just the <table> element

Exmaple setting table to 750px by adding a style attribute:

  @Html.Kendo().Grid(Model)
               .Name("Grid")
               .TableHtmlAttributes(new {style="height: 750px;"})

Answer 4

In strongly typed ones use for a rigid fixed height

.Scrollable(scrollable => scrollable.Height(100))

In Js after dataSource declaration use

$("#Grid").kendoGrid({

            dataSource: { },

            height: 450,

            pageable: {
                refresh: true,
                pageSizes: true
            },

            columns:
                [
                   ***
                ]
        });

You can also bind your grid for minimum and maximum heights for all the girds you have through css.

.k-grid .k-grid-content {
 min-height: 100px;
 max-height: 400px;
}

Or you can specify a specific grid, you replace the .k-grid with the specific grid id #YourGridName. Hope this helps.

Answer 5

You can also use external css rules for this, which can be preferable if your grid is re-used (as in a partial view). If you provide a style or height attribute, Kendo adds those in-line and thus they cannot be overriden by an external style sheet. Sometimes you want that, but sometimes you don't.

Using the .Name() string provided to the wrapper, it's easy to write a css rule to target the header or the content.

#GridName .k-grid-content {
    height: 300px; /* internal bit with the scrollbar */
}

#GridName .k-grid-header-wrap tr {
    height: 75px; /* header bar */
}

Note that the .k-grid-header-wrap class may vary depending on how you initialize the grid. Also, you have to target the tr or th tags inside the header. Styling the whole header (it's usually a div tag) leads to inconsistent results. Some browsers won't apply the rule, some browsers will leave a visible artifact where the borders of the actual tr/th begin.

Oh, and I should also say that this approach allows flexibility when changing between an MVC wrapper created grid and a regular js created grid. Or you can reuse the style sheet between different grids.