Angular SyncFusion的EJS-GRID子网格(分层绑定)

Question

我正在处理ejs网格，当我单击网格中的一行时，我想切换(展开/折叠(子网格。

我能够使用(rowSelected(属性使行单击功能正常工作，但我真的不知道如何获取子网格(折叠或展开(的当前状态。

我的当前代码

toggleChildGrid(event){
const rowIndex = event.rowIndex;
const isCollapsed = true;
if(isCollapsed){
this.grid.detailRowModule.expand(rowIndex);
}
else{
this.grid.detailRowModule.collapse(rowIndex)
}
}

我刚刚使isCollapsed变量为true，但我希望它能根据子网格的状态动态派生。

Answer 1

您可以使用一个包含展开的行索引的集合，并从该列表中添加/删除以表示该行是否展开/折叠

private expandedRowIndices = new Set<number>();
toggleChildGrid(event: {rowIndex: number}): void {
const rowIndex = { event };
const isExpanded = this.expandedRowIndices.has(rowIndex);
// If it is currently expanded, now collapse
if (isExpanded) {
this.grid.detailRowModule.collapse(rowIndex);
this.this.expandedRowIndices.remove(rowIndex);
} else {
this.grid.detailRowModule.expand(rowIndex);
this.this.expandedRowIndices.add(rowIndex);
}
}

Answer 2

根据您共享的信息，我们怀疑您希望在单击网格行时根据当前状态展开/折叠子网格。为了满足您的要求，我们建议您使用我们的默认recordClick事件。

使用此事件，我们可以找到子网格的当前状态，并在此基础上使用展开和折叠方法进行折叠和展开。

请参阅下面的代码和示例链接。

recordClick(args({const isCollapsed=(args.target.colosest('tr'(.nextElementSibling.classList.contents('e-detailrow'(&amp；(args.target.colosest('tr'(.nextElementSibling.style.display！='none'(==真的吗？真：假；if(！isCollapsed({this.grid.detailRowModule.expand(args.rowIndex(；}其他{this.grid.detailRowModule.collapse(args.rowIndex(；}}

示例链接：https://stackblitz.com/edit/angular-pm1ziu-9kpxum?file=app.component.ts

API链接：https://ej2.syncfusion.com/documentation/api/grid#recordclick