Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫。

Width

默認情況下，Grid沒有設(shè)置寬度，其操作類似于塊級元素，并擴展為100％的寬度（父元素的寬度）。

入門指南

要控制Grid的寬度，請將CSS width屬性設(shè)置為Grid本身或其某些父類，如果您使用層次結(jié)構(gòu)，并且明細模板是可滾動的，否則明細模板必須比所有主列的寬度之和窄。

如果啟用滾動并且所有列寬的總和大于Grid的寬度，則會出現(xiàn)一個水平滾動條。如果禁用滾動并且各列不適合，則它們會溢出Grid的div元素。div溢出導(dǎo)致窗口小部件的右邊界穿過數(shù)據(jù)單元格，因為Grid是div元素內(nèi)的table元素，而包圍它們的內(nèi)容表可以水平擴展到100％以上，而div元素缺乏這種操作。

為避免表溢出，請應(yīng)用以下任一方法：

• 啟用滾動功能，在使用Kendo UI Grid MVC封裝器時，默認情況下降禁用滾動功能。

• 為Grid     wrapper設(shè)置一個足夠大的寬度或最小寬度的樣式——div class =“ k-widget k-grid”元素。

• （僅當(dāng)前兩個方法不可接受時才使用此方法）浮動Grid wrapper和清除小部件后的浮動，浮動元素會根據(jù)需要自動擴展和收縮以包圍其內(nèi)容。

應(yīng)用最小寬度

根據(jù)特定的方案，您可以使用以下任何一種方法來定義網(wǎng)格的最小寬度。

如果禁用了滾動，請使用以下CSS。

#GridID
{
min-width: 800px;
}

如果啟用了滾動并且Grid不是分層的（沒有嵌套表），請使用以下CSS。

#GridID .k-grid-header-wrap > table, //A header table.
#GridID .k-grid-content table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table // A data table, with virtualscrolling.
{
min-width: 800px;
}

如果啟用了滾動并且網(wǎng)格是分層的（具有嵌套表），請使用以下CSS。

#GridID .k-grid-header-wrap > table, //A header table.
#GridID .k-grid-content table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table // A data table, with virtualscrolling.
{
min-width: 800px;
}
#GridID .k-grid-content table table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table table // A data table, with virtualscrolling.
{
min-width: initial;
}