Kendo Grid expand/collapse details on master row click

Question

I would like to implement a specific Kendo grid behavior with master-detail rows. The desired behavior is if you click on a row, the details would expand, and if you click on another row it expands and the other one is close, so only one detail would be open at the time.

By default, details could be opened via clicking to the +/- symbol at the start of the row. I saw that there is some question similar to this, but most of them use .rowCollapse() method which is deprecated regarding the Kendo documentation. I would like to implement it via the suggested ExpandDetailsDirective but I couldn't figure out what is the proper way of doing this.

Also is there a way to hide the +/- symbol completely?

// My HTML atm
<kendo-grid [data]="data"
            [sortable]="true"
            [selectable]="true"
            (selectionChange)="rowSelection($event)"
            [rowSelected]="isRowSelected"
            kendoGridExpandDetailsBy
            [expandDetailBy]="expandDetailsBy"
            [(expandedDetailKeys)]="expandedDetailKeys">
  <kendo-grid-column field="id"></kendo-grid-column>
  <div *kendoGridDetailTemplate="let dataItem">
    <grid-row-details [input]="dataItem"></grid-row-details>
  </div>
</kendo-grid>

// TS
export class Myomponent implements OnInit {
  data: any[] = [{ id: 1 }, { id: 2 }, { id: 3 }];

  selectedId: number;

  public expandedDetailKeys: any[] = [];

  public expandDetailsBy = (dataItem: any): any => {
    return dataItem.id;
  };

  isRowSelected = (row: RowArgs) => row.dataItem.id === this.selectedId;

  rowSelection(payload: SelectionEvent) {
    this.selectedId = payload.selectedRows[0].dataItem.id;
    this.expandDetailsBy({ id: this.selectedId });
  }

  constructor() {}

  ngOnInit(): void {}
}

I've answered a question like this yesterday. Check it out: stackoverflow.com/a/61657974/1267304 — DontVoteMeDown
@DontVoteMeDown Thank you, I have checked it. I am not familiar with jQuery at all so I am not sure how could I port that solution to Angular. Could you help me with that please? Also I saw that in the solution that it uses .rowCollape()/.rowExpand() methods, these are deprecated in the Angular version, is there any workaround that uses the ExpandDetailsDirective? — Hordon
And I'm not familiar with angular api. The point is that you need 3 things: to check the change event, to check if its expanded or collpased, and perform the expand or collapse action. In your post its no clear in which part you're stuck. I see that you got rowSelection which should be the change event equivalent in jQuery api. That works ? — DontVoteMeDown
@DontVoteMeDown Yeah, the row selection part is okay. In there I would like to call the expand/collapse method, but there isn't any clear choice for that, the this.expandDetailsBy() solution doesn't work. I tried to figure out the docs, but it isn't clear for me. telerik.com/kendo-angular-ui/components/grid/master-detail/… — Hordon

Charles Ranaboldo Charles Ranaboldo · Accepted Answer · 2021-02-21T23:54:47

Try grid directive

(detailExpand)="onExpandHandler($event)"

then in code

onExpandHandler(e) {
this.collapseAll(e)}


 public collapseAll(row: number = -1) {
this.view.subscribe(itm => {
  let i = 0;
  for (i = 0; i < itm.data.length; i++) { if (i != row) this.grid.collapseRow(i); }
})}

Kendo Grid expand/collapse details on master row click

1 Answers