Datagrid selected item for grouped data

Question

I have a grid that has groupable set to true and data grouped by using "process" like this:

refreshSearchResults() {
this.resultsData = process(this.memberships, 
     {
        skip: this.resultsSkip,
        take: this.resultsPageSize,
        sort: this.resultsSort,
        group: this.groups
     }
  );
}

The selection event sends the index of the grid row, but in grouped data, that has nothing to do with the actual data index. so this:

private resultsRowSelectionChanged(selection: any): void {
   if (selection.selected) {
      this.selectedMembership = this.resultsData.data[selection.index];
   }
   else {
      this.rightPanel.clearClientInfo();
   }
}

tries to apply the row selection index to the grouped data but that is not correct, as the index is for the groups and not the data itself.

Any suggestions on how to pick the correct piece of grouped data by the selection event index would be appreciated.

Answer 1

You can flatten the array with reduce and use the absolute index:

public selectionChange(event) {
    console.log(this.gridView.data.reduce((acc, curr)=> {
        return acc.concat(curr.items);
    }, [])[event.index]);
}

check this plunkr

http://plnkr.co/edit/QWLD8awyCXtQ7DRU7pZx?p=preview