Data Grid does not update when data change

1

I need to select multiple rows from an existing data grid to run a batch operation on them.
I do it as following:

  • create empty list to store future selections
  • assign to RowDoubleClick event .push(${event}) method to populate the list by selected rows
  • place a data grid to visualize selected rows and be able to remove them from the list too

2 problems:

  • custom data grid does not generate columns for that custom list until I declare at least one JSON inside. This is frustrating because I don't want to see any irrelevant data
  • custom data grid doesn't show selected data, it doesn't update itself, but if I visualize the list in a data list component, I see all the changes

What should I do to update the grid along with new selections?

2

The PrimeNG DataGrid component that Radzen uses under the hood need the whole array to change. For example data.push(item) will not make the DataGrid display the new item. However data = [...data, item] will display the appended item because data has changed. You can try doing Set property Name: selectedList, Value: [...${selectedList}, ${event}]

3

It works, thanks. But now I need the same for deletion and this code doesn't work:

const index = this.SelectedFamRevs.indexOf(${event}, 0);
if (index > -1) {
this.SelectedFamRevs.splice(index, 1);
}
const SelectedFamRevs=this.SelectedFamRevs

But data list shows that elements are deleted from the list...

4

This is the exact same thing. Instead of splice use Array.filter - you need a new array instance. This forum thread has a solution.

5

Thx. Now it works.
It's kind of expensive method to deal with the whole array when you modify only one member...