Hidden Containers

If you initialize a scrollable Grid with a set height inside a hidden container, the Grid will not adjust its vertical layout correctly.

For example, when you apply scrolling, virtual scrolling, or locked columns and initialize the Grid in a hidden container, its vertical layout will not be correctly adjusted because the JavaScript size calculations do not work for elements with a display:none style. For more information on the supported scroll modes by the Grid, refer to the section on scrolling.

You can identify that the Grid is initialized in a hidden state if any of the following symptoms occur:

  • The Grid appears smaller than expected.
  • The scrollable data area overflows the bottom border of the Grid.
  • The vertical scrollbar is not visible even though virtual scrolling is enabled.
  • Frozen columns are too narrow and non-frozen columns are not visible.

To handle the behavior that is related to the initialization of the Grid inside a hidden container, use any of the following approaches:

  • Delay the initialization of the Grid or change the order in which various Kendo UI widgets are initialized, so that the Grid is initialized after its element becomes visible.
  • Execute the resize method of the Grid after the widget becomes visible.
  • Instead of setting an overall height for the Grid in its configuration, define the height for the scrollable data area only. In this case, no height calculations are made. This approach is applicable only if frozen columns and virtual scrolling are not used.

      #GridID .k-grid-content
      {
          height: 270px;
      }
    
  • Fetch the data source instead of calling the resize() method. This approach is applicable if virtual scrolling is enabled and the Kendo UI version is older than 2014.3.1119.

    $("#GridID").data("kendoGrid").dataSource.fetch();
    

See Also

In this article
Not finding the help you need? Improve this article