Kendo UI Web开发：看如何实现隐藏的容器

Kendo UI for jQuery R2 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

隐藏的容器

如果在隐藏的容器内初始化Grid，则Grid可能无法正确调整其布局。

例如，当您应用滚动、虚拟滚动或锁定的列并在隐藏容器中初始化Grid时，将无法正确调整其垂直布局，因为JavaScript尺寸计算不适用于display：none样式的元素。

如果出现以下任何情况，则可以确定网格是在隐藏状态下初始化的：

• 网格看起来小于预期
• 可滚动的数据区域溢出了网格的底部边框
• 即使启用了虚拟滚动，垂直滚动条也不可见
• 冻结的列太窄，非冻结的列不可见
• pager可能不会出现，或者可能是最小的pager，而不是完整的pager

若要处理与隐藏容器内的网格初始化有关的操作，请选择以下任意一种方法：

1. 延迟Grid的初始化或更改各种Kendo UI窗口小部件的初始化顺序，以便在其元素可见后初始化Grid。

2. 小部件可见后，执行Grid的resize方法。

3. 替代其配置中的网格设置整体高度，而仅可滚动数据区域定义高度。在这种情况下，不进行高度计算。 仅当不使用冻结列和虚拟滚动时，此方法才适用。

 

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

 

4. 获取数据源，替代resize()方法。如果启用了虚拟滚动并且Kendo UI版本低于2014.3.1119，则此方法适用。

 

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

 

---

了解最新Kendo UI最新资讯，请关注Telerik中文网！