Grid multiselect keep selected records after aplying filter

Question

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

Dhivya Rajendran · Answer

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); 
    } 
} 

Sample : https://plnkr.co/edit/YhTW307EsScJ4entKnG4?p=preview   
Documentation:  
https://ej2.syncfusion.com/16.1.32/documentation/grid/api-grid.html?lang=typescript#selectrows  

https://ej2.syncfusion.com/16.1.32/documentation/grid/api-grid.html?lang=typescript#actionbegin  

Please get back to us if you need further assistance. 

Regards, 
R.Dhivya

Karam Ramadan · Answer

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

Balaji Sekar · Answer

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); 
        } 
    } 

Sample link: https://www.syncfusion.com/downloads/support/forum/137127/ze/sample_-_mvc_cols_hide1270849184-622837536.zip  

Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar