Kendo UI是帶有jQuery、Angular、React和Vue庫的JavaScript UI組件的最終集合，無論選擇哪種JavaScript框架，都可以快速構建高性能響應式Web應用程序。通過可自定義的UI組件，Kendo UI可以創建數據豐富的桌面、平板和移動Web應用程序。通過響應式的布局、強大的數據綁定、跨瀏覽器兼容性和即時使用的主題，Kendo UI將開發時間加快了50%。

需要在屏幕上為你的網頁應用壓縮更多數據？來看看Kendo UI中React、Angular、Vue和Blazor庫中現在可用的緊湊網格選項！

Kendo UI R1 2023正式版下載

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

在Web應用程序中，開發數據網格是一件比較難的事情，越來越多的客戶端似乎都需要盡可能多的數據壓縮在一個屏幕上。Kendo UI DataGrid為React、Angular和Vue樣式提供了一個漂亮的新功能(加上Telerik UI for Blazor)，可以輕松切換視圖來插入更多數據。

在這個例子中，可以看到另外兩行：

首先，在啟用這個更緊湊的數據網格版本之前，我們需要安裝它。

在您的Angular項目的根目錄下，終端上運行這個命令：

ng add @progress/kendo-angular-grid

現在已經完成了Kendo UI Data Grid下載，可以使用這個標簽將它添加到應用程序中：

<kendo-grid [data]="gridData">
</kendo-grid>

在網格中，可以定義列和數據屬于每個列，如下所示：

<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductID" title="ID"> </kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name"> </kendo-grid-column>
<kendo-grid-column field="Category.CategoryName" title="Category"> </kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Price"> </kendo-grid-column>
</kendo-grid>

上面網格中的數據在組件的TypeScript文件中是這樣結構的：

public gridData: Product[] = [
{
ProductID: 1,
ProductName: 'Coffee Milk Tea',
UnitPrice: 5,
Category: {
CategoryID: 1,
CategoryName: 'Beverages'
}
},
{
/*...*/
}
];

除了分組、過濾、分頁、排序、導出等功能之外，Kendo UI Grid還有一個新功能，可以調整網格的大小，使其更緊湊。

網格有一個大小調整選項，用于調整網格中所有元素的填充。size屬性支持三個選項：small、medium和none(刪除與大小相關的樣式)。

在這里通過創建的三個按鈕，您可以看到默認(中等)、小(緊湊選項)之間的差異，甚至將none傳遞給大小調整選項之間的差異。

Kendo UI Grid已經添加了完整的功能列表，但是當屏幕尺寸變小或變大時，不會自動出現。接下來看看實現這一目標的一種方法。

在這里創建了一個HostListener(這是Angular附加事件來適應Angular變更檢測流程的方式)，這樣不必擔心在創建時初始化它，或者在銷毀時刪除它——Angular會處理，因為使用了一個HostListener，這段代碼在React、Vue或jQuery中看起來非常相似，我們只是利用JavaScript的窗口訪問來提醒數據網格當屏幕大小改變或開始變小/變大。

現在，當屏幕小于1000px時，這將從默認的“medium”切換到“small”。

當然插入這個大小不同的屬性/屬性的Grid語法看起來也略有不同，例如下面是如何改變React數據網格的大小：

現在，讓我們來看看如何在Vue中做到這一點：

在這里，您可以看到啟用small的并排差異。同樣的空間可以容納更多的數據，這是利用 Kendo UI Data Grid for Vue中的語法完成的：

Kendo UI for jQuery將在R2 2023中用于這個功能，官方技術團隊在.NET端的組件中也添加了這個很酷的功能，讓我們來看看Telerik UI for Blazor是如何完成的：