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

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.