1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Grid multiselect keep selected records after aplying filter

Grid multiselect keep selected records after aplying filter

Hi, 

I have a grid with local data as datasource, multi select and allowFiltering set as true. I was wondering if there is a way to keep the selected records as selected after aplying a filter (for those selected that match the filter).

I appreciate your guide.

Kind regards,

Juan J. Uribe

3 Replies
DR Dhivya Rajendran Syncfusion Team April 20, 2018 11:52 AM UTC

Hi Juan, 

Thanks for contacting Syncfusion support. 

Query: Grid multiselect keep selected records after applying filter? 
 
We have analyzed your requirement and create a sample for your reference. In the below sample we have used actionBegin and actionComplete event to achieve your requirement. In actionBegin event we get the selected records primary key value and filtered data primary key values in actionComplete event, based on which the selection is restored after filtering action using selectRows method. You can achieve your requirement by using this way and you should specify the primaryKey columns in Grid. Kindly refer to the below sample and code example for more information. 

let grid: Grid = new Grid({ 
    allowFiltering: true, 
    selectionSettings: { type: 'Multiple' }, 
    columns: [ 
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', isPrimaryKey: true, width: 100 }, 
        . . . . . . . 
    ], 
actionBegin: (args) => { 
    if (args.requestType === 'filtering') { 
        seleteddata = grid.getSelectedRecords().map(columns => columns.OrderID); //selected data 
    } 
}, 
    actionComplete: complete 
}); 
grid.appendTo('#Grid'); 
function complete(args) { 
    if (args.requestType === 'filtering') { 
        filterdata = grid.getCurrentViewRecords().map(columns => columns.OrderID); // filtered data 
        final = filterdata.filter(element => seleteddata.includes(element));  
        filterdata.forEach((i, index) =>if (final.indexOf(i) > -1) { 
        selectRowIndex.push(index); 
      });        
       grid.selectRows(selectRowIndex); 
    } 
} 

Documentation:  


Please get back to us if you need further assistance. 

Regards, 
R.Dhivya 


KR Karam Ramadan February 2, 2021 10:01 AM UTC

Hello,
I'm trying to do the same thing for MVC, but I need the selected rows to stay selected after applying a filter or deleting the filter.

Is there any way to achieve that?

Thanks in advance 

Regards,
Karam

BS Balaji Sekar Syncfusion Team February 3, 2021 02:54 PM UTC

Hi Karam, 

Query: Selection maintain in the Grid row while filtering/clear filtering on Grid component in ASP .Net MVC platform 
 
We have created a sample in ASP.NET MVC platform and achieved your requirement using actionBegin & actionComplete events. 

Please refer the below code example and sample for more information. 

[Index.cshtml] 
var seleteddata; 
    var filterdata; 
    var final = []; 
    function complete(args) { 
        if (args.requestType === 'filtering') { 
            let selectRowIndex = []; 
            filterdata = this.getCurrentViewRecords().map(columns => columns.OrderID); 
            final = filterdata.filter(element => seleteddata.includes(element)); 
            filterdata.forEach((i, index) => { 
                if (final.indexOf(i) > -1) { 
                    selectRowIndex.push(index); 
                } 
            }); 
            this.selectRows(selectRowIndex); 
        } 
    } 
    function begin(args) { 
 
        if (args.requestType === 'filtering') { 
            seleteddata = this.getSelectedRecords().map(columns => columns.OrderID); 
        } 
    } 


Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar 


Loader.
Up arrow icon