Height

By default, the Grid has no set height and expands to fit all table rows.

Getting Started

Set the height to the Grid only when its scrolling is enabled. For more information on the supported scroll modes by the Grid, refer to the section on scrolling.

To set the height of the Grid, use any of the following approaches:

• Apply an inline height style to the <div> from which the Grid is initialized.
• Use the height property of the component which will apply an inline style to the Grid wrapper—the same as the previous option.
• Use external CSS. For example, use the ID or the .k-grid CSS class to apply a height style.

When you set the height of the Grid, it calculates the suitable height of its scrollable data area, so that the sum of the header rows, filter row, data, footer, and pager is equal to the expected height of the component. That is why if you change the height of the Grid through JavaScript after you create the component, you have to call the resize method afterwards. In this way the Grid recalculates the height of its data area.

In specific scenarios you can set a height style to the scrollable data area either by using JavaScript or external CSS which is a div.k-grid-content element. In such cases avoid setting a height to the Grid.

Figure 1: A Grid with a fixed height and scrolling functionality enabled

Setting a Minimum Height

Not applicable when virtual scrolling is enabled. For more information on the supported scroll modes by the Grid, refer to the section on scrolling.

You can make the Grid expand and shrink vertically according to the number of its rows and yet within specific limits. To achieve this, apply a minimum and/or maximum height style to the scrollable data area and do not set any height of the Grid. If you use the MVC wrapper of the Grid, remove the default data area height. Instead of the GridID, you can also use the .k-grid class to target all component instances.

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

Enabling Auto-Resizing

Applicable to scrollable Grids only. For more information on the supported scroll modes by the Grid, refer to the section on scrolling.

1. To allow the Grid resize together with its parent, apply a 100% height style to the <div class="k-grid"> wrapper of the component. According to the web standards, elements which have their height set in percentage require that the height of their parent is also explicitly set. This requirement applies recursively until either an element with a pixel height or the html element is reached. Elements that are 100% high cannot have margins, paddings, borders, or sibling elements. That is why you have to remove the default border of the Grid as well.
2. Make sure that the inner layout of the Grid adapts to changes in the height of the <div> wrapper. If these changes are triggered by the resizing of the browser window, subscribe to the window resize event of the browser and execute the resize method of the Grid. The resize method measures the height of the Grid <div> and adjusts the height of the scrollable data area.
   • If the Grid is placed inside a Kendo UI Splitter or Kendo UI Window, you do not need to call the resize method because these components will execute it automatically. Also, it is not necessary to apply the method if you use locked columns.
   • If the vertical space that is available for the Grid depends on a custom resizing of the layout, which is controlled by the user, use a suitable event or method related to the layout changes to execute the resize method of the Grid. In this case, call the resize method even if you use locked columns.

The resize method works for the Kendo UI versions after the Kendo UI Q3 2013 release. For earlier versions, instead of resize, use the following approach which functions in a similar way. For more information, refer to the article on how to resize the Grid when the window is resized.

$(window).resize(function() {
    var gridElement = $("#GridID"),
        newHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;

    otherElements.each(function(){
        otherElementsHeight += $(this).outerHeight();
    });

    gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
});

Configuring the Loading Indicator

Internally, the Grid uses the kendo.ui.progress method to display a loading overlay during remote read requests. If scrolling is disabled, the overlay is displayed over the whole Grid. If scrolling is enabled, the overlay is displayed over the scrollable data area. If scrolling is enabled and the Grid has no set height, the data area will initially have a zero height, which will make the loading overlay invisible during the first remote request. To visualize the loading overlay, use either of the following approaches:

• Set the height of the Grid, or
• Apply the min-height style to the div.k-grid-content element.

For more information, refer to the example of setting the height within specific limits. For more information on the supported scroll modes by the Grid, refer to the section on scrolling.

KB Articles on Height

• Changing the Height of the Grid When Using Frozen Columns
• Hiding the Vertical Scrollbar
• Disabling Resizing for Specific Columns
• Creating Fixed Headers on Scroll
• Find Out More in the Knowledge Base

See Also

• Scroll Modes of the Grid
• JavaScript API Reference of the Grid