3

I am using igx-grid. When I am clicking on select all using rowSelection, it selecting all the records present in grid, not of current page. I want to enable something by which when I click on select all of igx-grid checkbox, it should select only current page record, not all. Is there any way to do the same? Because I am trying it from last 3 days but not getting any solution. Thanks in Advance!!!

  • The select all checkbox does indeed select all of the records. If you want to limit the selection to a subset, then handle the `onRowSelectionChange` event as suggested by @Toxy – Konstantin Dinev May 10 '21 at 13:29
  • I handled it with front end pagination, but I want to develop it with server side pagination(SSP), but while doing with SSP, I was facing issue in Filtering, I posted a question for the same. Can you please put your thoughts on the same issue? Here is the link => https://stackoverflow.com/questions/67312538/how-to-filter-data-in-current-page-only –  May 10 '21 at 13:36

2 Answers2

2

Select Rows programmatically :

<button (click)="this.grid.selectRows([1,2,5], true)">Select 1,2 and 5</button>

Deselect Rows programmatically :

<button (click)="this.grid.deselectRows([1,2,5])">Deselect 1,2 and 5</button>

Source : Official documentation of igx-grid (Row Selection)

Try using (onRowSelectionChange) Event

Toxy
  • 696
  • 5
  • 9
  • yah but when we filter data, it filters data which is in built feature of igx grid, it doesn't work correctly. –  Apr 23 '21 at 05:50
  • also then when you filter the data you need to select all data not only from 1st page ? – Toxy Apr 23 '21 at 06:00
  • use this event `onRowSelectionChange` and put your logic – Toxy Apr 23 '21 at 06:07
  • 1
    I tried everything, but when I am filtering, all the logic which I used, is not useful, do you have any solution for it? –  Apr 23 '21 at 06:10
  • need to see your code for that also can store the data when filter is done then use rowselect change event – Toxy Apr 23 '21 at 06:16
0

You can use this.grid.deselectRows([1,2,5]) as @Toxy said but as arguments you can use the property dataView of IgxGridComponent that is an array of only row data displayed in the grid.

onRowSelectionChange(event) {
    this.grid.selectRows(this.grid.dataView.map(x => x.id), true);
    this.currentSelection = this.grid.selectedRows;
}

This not have problem with filters because dataView change when filters are applied. Now in this.currentSelection there are only the page id data. Only little problem is that, graphical, the row data of other pages appears selected (despite they are not presente in this.grid.selectedRows); I resolved this issue using (pageChange)="onPageChange($event)" and when page changes this.grid.deselectAllRows(false); false argument let you to deselect all rows in the grid regardless of filters.

Edo2610
  • 184
  • 1
  • 9