Select All rows after filtering, selects only those which are on the current page

Question

Hello.

I am having a serious problem with Data Grid.

Here is a short description:

1) I have a data grid with around 200 records, 50 per page.
2) I perform filtering programmatically

ej2Grid.filterByColumn(
        'columnName',
        'equal',
        'someValue'
      );

Filtering works perfectly, I can see a grid with only those data which have desired values (i.e. 70 rows, 50 on the first page, and 20 on the second page).

3) I need to immediately select all filtered values, so calling:

public actionComplete(args): void {
    if (args.requestType === 'filtering' && args.action === 'filter') {
      this.orderGrid.ej2Grid.selectRows(args.rows.map((row) => row.index));
    }
  }

4) Unfortunately, i.e. there are 70 values after filtering - I can see only 50 selected. It looks that selection happens only for the current page.

What I tried:

- putting a dummy list of indexes from 0 - 69 as a parameter in ej2Grid.selectRows but only 0-49 were actually selected.

Can you please advise?

but only 0-49 were actually selected. Can you please advise?

Ajith Govarthan · Answer

Hi Aleksandra, 

Thanks for contacting Syncfusion support. 

Query: Select All rows after filtering, selects only those which are on the current page 
 
By default, in our EJ2 Grid if you enable paging feature, then the rows are rendered as per the pageSize. So, for example if you move to second page the Grid component will render the row elements only for the second page as per the pageSize value, which is the default behavior of the paging feature. 

As per your requirement you want to select all the filtered records across all the pages with selectRows method. But by default, in our EJ2 Grid the row selection will be done only for the available row elements in Grid content element. 

So, in your case the filtered records are available on other pages also. So, when you call the selectRows method, the selectRows will only select the row elements which are available in the current page alone and for the other pages the row elements will not be generated. So, the selectRows method will select only the currentPage records alone. 

However, we have prepared sample and in that we have selected all the filtered records across all the pages using the actionComplete event. For your convenience we have attached the sample, please refer them for your reference. 

Code Example: 




App.component.ts 

actionComplete(args) { 
    if (args.requestType === 'filtering' && args.action === 'filter') { 
      this.grid.selectionModule.selectRowsByRange( 
        0, 
        this.grid.getCurrentViewRecords().length - 1 
      ); 
    } 

    if ( 
      args.requestType === 'paging' && 
      this.grid.filterSettings.columns.length 
    ) { 
      this.grid.selectionModule.selectRowsByRange( 
        0, 
        this.grid.getCurrentViewRecords().length - 1 
      ); 
    } 
  } 

Sample Link: https://stackblitz.com/edit/angular-uo59kz?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 
Ajith G.

Aleksandra Kiszka · Answer

Hi Ajith,We have a problem here, as we don't only want to show selection to the user, but also submit the rows to some backend API. Your approach only works for the page with which the user is interacting. Let me share a scenario:1) User has a page size of 52) The users filters certain column and it has a total of 10 rows in ejs grid3) Now user goes to page 2 and deselect the 7th row4) Now he has total 9 selectionsHow can we cover this kind of use case?

Ajith Govarthan · Answer

Hi Aleksandra, 

Thanks for the update. 

Query: We have a problem here, as we don't only want to show selection to the user, but also submit the rows to some backend API. Your approach only works for the page with which the user is interacting. 
 
Based on your query, you want to select all the filtered data without interacting with page navigation in your Grid application. So, we have prepared sample in that we have used the actionComplete event and called the checkSelectAll method to select all the filtered records without navigating to next pages. 

We have also console logged the filtered records using the getFilteredRecords method and selected records using the getSelectedRecords method. You can use these methods to send the data to your API service.  For your convenience we have attached the sample please refer them for your reference. 

Code Example: 




App.component.ts 

  actionComplete(args) { 
    if (args.requestType === 'filtering' && args.action === 'filter') { 
      (this.grid.selectionModule as any).checkSelectAll(); // select all the data here 
    } 
  } 

  onFltrClick(args) { 
    console.log(this.grid.getFilteredRecords());  // get the filtered records here 
  } 

  onSelectedRecordClick(args) { 
    console.log(this.grid.getSelectedRecords()); 
  } 

Sample Link: https://stackblitz.com/edit/angular-uo59kz-pepjtc?file=app.component.ts 

If you still face the issue, then please share more details on your reported query “we don't only want to show selection to the user, but also submit the rows to some backend API”  to validate further on your requirement. 


Regards, 
Ajith G.

Aleksandra Kiszka · Answer

Hi,I am not using checkbox selection. Please provide a solution where we select rows using mouse click and not using checkboxes.I would appreciate a stackblitz for that. Thanks

Joseph Christ Nithin Issack · Answer

Hi Aleksandra, 

  Thanks for your update. 

  Based on your requirement, when you perform filtering action in the grid, you want to select all the  
filtered records in the grid.  

   Your requirement can be achieved by using the `actionComplete` event of the EJ2 Grid, where you call the `checkSelectAllAction` private method with an argument `true`. Also ensure that you have enabled `selectionSettings.persistSelection` option and set `selectionSettings.type` option as `Multiple`.   

  Please refer the below code example. 






public ngOnInit(): void { 
        this.data = orderDetails; 
        this.selectOptions = { persistSelection: true, type: 'Multiple' }; 
        this.editSettings = { allowDeleting: true }; 
        this.toolbar = ['Delete']; 
    } 
 
    actionComplete(args) { 
        if (args.requestType === 'filtering' && args.action === 'filter') { 
            (this.grid.selectionModule as any).checkSelectAllAction(true); 
        } 
    } 



Sample: https://stackblitz.com/edit/angular-uo59kz-vn7cex?file=app.component.ts 

Please find the attached sample and revert for more queries. 

Regards, 
Joseph I.

Aleksandra Kiszka · Answer

Hi Joseph, Thanks for your assistance. The last solution works for me perfectly! Regards,Aleksandra

Joseph Christ Nithin Issack · Answer

Hi Aleksandra, 

  Thanks for you update. 

  We are glad that the provided solution works fine at your end. 

  Please revert for more queries regarding this. 

Regards, 
Joseph I.