Kendo UI致力于新的開發，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。Kendo UI for Angular是專用于Angular開發的專業級Angular組件，telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關系。

網格是顯示一些可重復數據行的極好工具，但只有當你提供上下文時，“數據”才會變成“信息”。

Kendo UI for Angular Grid允許開發者將“data card”（數據卡）與網格中的行關聯起來，您可以用它來保存“額外的”或“相關的”信息。用戶可以選擇展開或折疊感興趣的行，但也可以控制顯示哪些行的數據卡，以便將網格與UI的其余部分集成在一起。

Kendo UI R1 2023正式版下載

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

顯示其他詳細信息

使用Kendo UI Angular Grid實現數據卡很簡單——只需要三個步驟：

1. 在kendo-grid元素內部，添加一個ng-template元素，它引用kendoGridDetailTemplate。
2. 通過在ng-template元素中添加let-dataItem微語法來訪問行中顯示的對象。
3. 在模板中插入HTML。

開發者可以將ng-template元素放在kendo-grid元素中的任何位置，但是將它放在最后一個kendo-grid-column元素之后可能更有意義。

 作為案例研究，對于顯示Department對象列表的網格，您可以在行中顯示部門的名稱和id(對象的deptName和id屬性)，然后可以使用ng-template數據卡來顯示Department對象中的其他屬性。

例如，這個標記顯示了部門的區域和部門經理的員工id：

<kendo-grid-column title="Name" field="deptName" …></kendo-grid-column>
<ng-template kendoGridDetailTemplate let-dataItem>
<strong>Region:</strong> {{ dataItem.region }} <br/>
<strong>Manager:</strong> {{ dataItem.id }}
</ng-template>
</kendo-grid>

結果網格(其中一行展開)看起來像這樣：

獲取相關數據

默認情況下，開發者只能訪問與正在展開的行綁定的對象的屬性，但是沒有什么可以阻止開發者調用模板中的方法來檢索額外的或相關的數據，由“row object’s”屬性驅動。

例如，在之前的數據卡中，只顯示經理的員工id并不是一個非常令人滿意的解決方案，相反這個例子使用了一個名為getManagerName的方法，當傳遞給經理的id時，返回經理的名稱：

<ng-template kendoGridDetailTemplate let-dataItem>
<p><strong>Region:</strong> {{ dataItem.region }} <br/>
<strong>Manager:</strong> {{ getManagerName(dataItem.id }}
</ng-template>

如果想檢索一個完整的相關對象，這樣就可以在模板中顯示多個屬性，開發者可以利用ng-if指令調用一個方法來檢索想要的對象。雖然不能將ng-if指令放在ng-template元素上(與展開行的關聯的dataItem對象對于ng-template元素是不可用的)，但這并不是真正的問題：只需添加一個元素，將所有想要使用返回對象的數據卡標記括起來，并將ng-if指令放在元素上。

這個示例將數據卡的一部分包含在一個section元素中，該元素使用ng-if調用一個名為getManagerInfo的方法。該示例還使用as關鍵字為方法返回的對象分配名稱“manager”，然后card顯示該對象的屬性(作為獎勵，如果該方法沒有找到管理器對象并返回null，則使用ng-if也會抑制顯示管理器信息)：

<ng-template kendoGridDetailTemplate let-dataItem>
<strong>Region:</strong> {{ dataItem.region }} <br/>
<section *ngIf="getManagerInfo(dataItem.id) as manager" >
<strong>Manager:</strong><br/>
Id: {{manager.id}} <br/>
Name: {{manager.empName}}
</section>
</ng-template>

有了這個改變，顯示效果會更好：

當然當用戶展開一行時，也可以使用相同的技術從模板中調用函數來更新UI的其他部分。

控制展開項

如果希望支持用戶選擇展開哪些行，也可以這樣做，第一步是添加兩個指令到kendo-grid元素：

• expandedDetailKeys：必須指向標識展開行的鍵數組。
• kendoGridExpandDetailsBy：這必須指向一個返回行對象的鍵屬性的函數。

每當展開一行時，網格將自動調用kendoGridExpandDetailsBy函數，并將返回的key屬性添加到expandedDetailKeys數組(并在行折疊時刪除鍵)。

將指令添加到網格中，并將它們綁定到函數(expandDepartments)和數組(expedddepartments)，得到如下內容：

<kendo-grid
[kendoGridExpandDetailsBy]="this.expandDepartments"
[(expandedDetailKeys)]="this.expandedDepartments"
…

對應函數和數組的基本實現如下所示：

expandDepartments = (dataItem: Department): string => {
return dataItem.id;
};
expandedDepartments:string[] = [];

到目前為止，添加這些指令并沒有為網格添加任何功能。然而，有了這些指令，例如您可以讓用戶保存一個展開的行列表，展開/折疊其他行，然后返回到原來保存的列表。這兩個方法將當前展開項數組保存到組件的屬性中，然后通過從保存的數組中重置網格數組來恢復該列表：

savedExpandedList:string[] = [];

saveExpandedList()
{
this.savedExpandedList = this.expandedDepartments;
}
restoreExpandedList()
{
this.expandedDepartments = [];
this.savedExpandedList.forEach(d => this.expandedDepartments.push(d));
}

使用這些指令還允許您擴展所選擇的行，以將網格的顯示與UI中發生的任何其他事情集成在一起。例如，下面的函數將傳遞給它的部門id添加到展開行的數組中，從而導致網格中相應的行被展開。

這個實現假設您想要保留任何已展開的行，為了維護現有的展開行，代碼將所有現有項從expandedDepartments數組復制到一個新數組，將傳遞的鍵添加到新數組，然后重置expandedDepartments數組：

expandSpecifiedDepartment(deptId:string) {
let depts:string[] = [];
this.expandedDepartments.forEach(d => depts.push(d));
depts.push(deptId);
this.expandedDepartments = depts;
}

如果您希望關閉所有現有的展開項，而只顯示傳遞的項，則只需省略函數中的第二行。

當然，您可以自行決定如何使用此功能。但是現在您不僅可以顯示任何網格項的附加信息，還可以將該功能集成到UI的其余部分。