Hidden Containers
If you initialize a Grid inside a hidden container, the Grid may not adjust its layout correctly.
Understanding Why the Issue Occurs
When you apply scrolling, virtual scrolling, or locked columns and initialize the Grid in a hidden container, the vertical layout can break. The JavaScript size calculations do not work for elements that use display:none. For more information about Grid scrolling, see available scroll modes of the Grid HtmlHelper for ASP.NET Core.
Identifying Symptoms
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.
- The pager may not appear or may be the smallest responsive pager instead of the full one.
Applying Recommended Approaches
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 Kendo UI for jQuery
resize()method after the Grid 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 applies only when frozen columns and virtual scrolling are not enabled.
css#GridID .k-grid-content { height: 270px; } -
Fetch the data source instead of calling the
resize()method.This approach applies when virtual scrolling is enabled and the Kendo UI version is earlier than 2014.3.1119.
js$("#GridID").data("kendoGrid").dataSource.fetch();