CODEWITHSUNDEEP
angularkendo-uikendo-grid
Hordon
Hordon

Reputation: 713

Kendo Grid expand/collapse details on master row click

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 {}
}

Upvotes: 1

Views: 5143

Answers (1)

Charles Ranaboldo
Charles Ranaboldo

Reputation: 21

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); }
})}

Upvotes: 2

Related Questions