Kendo UI Web Development: See how to implement a hidden container

Kendo UI for jQuery R2 2020 SP1 trial version download

Kendo UI currently provides four controls: Kendo UI for jQuery , Kendo UI for Angular , Kendo UI Support for React and Kendo UI Support for Vue . Kendo UI for jQuery is the most complete UI library for creating modern web applications.

Hidden container

If the Grid is initialized in a hidden container, the Grid may not be able to adjust its 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 adjusted correctly because JavaScript size calculation does not apply to elements with display: none style.

If any of the following occurs, you can be sure that the grid was initialized in the hidden state:

  • The grid looks smaller than expected
  • The scrollable data area overflows the bottom border of the grid
  • Even if virtual scrolling is enabled, the vertical scroll bar is not visible
  • Frozen columns are too narrow, non-frozen columns are not visible
  • The pager may not appear, or it may be the smallest pager instead of the complete pager

To handle operations related to the initialization of the grid in the hidden container, please choose one of the following methods:

1. Delay the initialization of the Grid or change the initialization order of various Kendo UI widgets to initialize the Grid after its elements are visible.

2. After the widget is visible, execute the resize method of Grid.

3. Instead of setting the overall height of the grid in its configuration, only the scrollable data area can define the height. In this case, no height calculation is performed. This method is only applicable when frozen columns and virtual scrolling are not used.

#GridID .k-grid-content
{
height: 270px;
}

4. Get the data source instead of the resize() method. If virtual scrolling is enabled and the Kendo UI version is lower than 2014.3.1119, this method is applicable.

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

For the latest news about Kendo UI, please follow Telerik Chinese website!

Huidu high-end UI interface development

Guess you like

Origin blog.csdn.net/AABBbaby/article/details/108527881