Grid - Master/Detail

1 Answer 197 Views
Grid
John
Top achievements
Rank 1
Iron
John asked on 13 Jun 2023, 03:06 PM

I thought this would be an easy out of the box, but I was looking to have one detail open at a time.  How would I achieved that

thanks in advance

1 Answer, 1 is accepted

Sort by
0
Hetali
Telerik team
answered on 15 Jun 2023, 06:50 PM

Hi John,

In order to have one detail open at a time in the Kendo UI Master-Detail Grid, use the detailExpand event to update the expandedDetailKeys collection. For example:

 <kendo-grid
  kendoGridExpandDetailsBy="ProductID"
  [(expandedDetailKeys)]="expandedDetailKeys"
  (detailExpand)="detailExpand($event)"
>
  <ng-template kendoGridDetailTemplate let-dataItem>
  </ng-template>
</kendo-grid>

public expandedDetailKeys: number[] = [1];

public detailExpand(e) {
  this.expandedDetailKeys = [e.dataItem.ProductID];
}

Please take a look at this StackBlitz example where I have demonstrated the above discussed approach.

I hope this helps. Feel free to reach out if you have any further questions pertaining to controlling the expanded state of the detail Grid.

Regards,
Hetali
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Tags
Grid
Asked by
John
Top achievements
Rank 1
Iron
Answers by
Hetali
Telerik team
Share this question
or