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

組模板

應(yīng)用分組時(shí)，Grid的分組行將數(shù)據(jù)行組織為樹形結(jié)構(gòu)。

組行顯示組摘要值，并包含展開和折疊組圖標(biāo)，這些圖標(biāo)使用戶可以展開（顯示子行）和折疊（隱藏子行）組行。 Grid提供以下模板，可以用于自定義組行的外觀：

GroupHeaderTemplate – 為整個(gè)組行渲染一個(gè)模板。 通常主要目的是顯示有關(guān)整個(gè)組的信息，默認(rèn)情況下如果您未定義模板，那么將顯示字段名稱和當(dāng)前組值。

GroupHeaderColumnTemplate – 在與行本身對(duì)齊的組行中渲染模板。 通常它在當(dāng)前組的上下文中顯示特定列的合計(jì)值，模板內(nèi)容在視覺上顯示為與列本身對(duì)齊。

GroupFooterTemplate – 在與該列對(duì)齊的組頁腳行中渲染模板，與組頁腳行的groupHeaderColumnTemplate相似。

如果未定義模板，則以以下方式顯示字段名稱和當(dāng)前組。

圖1：沒有組模板的網(wǎng)格

使用GroupHeaderTemplate的唯一區(qū)別是模板內(nèi)容是編譯和顯示的，而不是字段和當(dāng)前組的值。 GroupHeaderColumnTemplate和GroupFooterTemplate的工作方式相似。

GroupHeaderColumnTemplate將內(nèi)容顯示為與組行中的列對(duì)齊。 GroupFooterTemplate將內(nèi)容顯示為與組頁腳行中的列對(duì)齊。 它們的內(nèi)容顯示為與列對(duì)齊，如下所示。

圖2：具有定義的組頭和組腳模板的網(wǎng)格

因?yàn)镚roupHeaderTemplate顯示在組行的擴(kuò)展圖標(biāo)旁邊，所以它優(yōu)先于第一個(gè)可見列的GroupHeaderColumnTemplate。 若要顯示Grid第一列的GroupHeaderColumnTemplate內(nèi)容，請(qǐng)不要為group列設(shè)置GroupHeaderTemplate。 下面的網(wǎng)格配置演示了對(duì)Units In Stock列的GroupHeaderTemplate進(jìn)行注釋，會(huì)顯示Product Name列的GroupHeaderColumnTemplate。