Grid with pagination and checkbox column, how to select only visible rows

[Tomasz]

Hi.

I create a grid with pagination and a checkbox

Next,

I have 30 items in the grid and the pagination is set to 10, now you can only see 10 rows, 10 items.

when I click on the header checkbox, I select all items, but I only want to select all visible. 10 items, not all 30.

Can you tell me how? or some parameter to add to the column definition, for example selectOnlyVisible true? "or something?

Please help.

[Sujith Kumar Rajkumar]

Hi Tomasz, 

Greetings from Syncfusion support. 

Based on your query we could understand that your requirement is to persist only the page selection for which the select all checkbox is checked. We would like to let you know that when local data is bound to the Grid and the persist selection property is enabled in the Grid’s selection settings, all the records will be selected in the Grid on clicking the select all. And for remote data only the current page record will be selected as it works on basis of on-demand loading. This is the default behavior of the Grid’s persist selection. 

However your requirement can be achieved for local data by dynamically selecting the current page rows(on performing the paging action) using the Grid’s selectRows method in its actionComplete event. The pages for which the selection need to be performed can be identified by maintaining the page index in a global array variable when the check all action is performed. 

This is demonstrated and explained in the below code snippet, 

var pages = []; 

var pageCountRange = []; 

 

// Grid’s load event handler 

function onGridLoad() { 

        // Retrieves Grid’s current page size 

        var pageSize = grid.pageSettings.pageSize; 

        var i = 0; 

        // Page indexes are stored in global variable for performing the selection operation 

        while (i < pageSize) { 

            pageCountRange.push(i); 

            i++; 

        } 

} 

 

// Grid’s headerCellInfo event handler 

function gridHeaderCellInfo(args) { 

        // Click action is defined for the check all checkbox 

        var checkEle = args.node.querySelector(".e-checkbox-wrapper"); 

        if (checkEle) { 

            checkEle.addEventListener("click", onCheckClick.bind(this)); 

        } 

} 

 

// Check all click event function 

function onCheckClick(args) { 

        var pageIndex = grid.pageSettings.currentPage; 

        // Store/remove the current page value in a global array based on check state  

        if (args.target.classList.contains("e-check")) { 

            var pageIndex = pages.indexOf(pageIndex); 

            pages.splice(pageIndex, 1); 

        } else { 

            pages.push(pageIndex); 

        } 

} 

 

// Grid’s actionComplete event handler 

function onGridActionComplete(args) { 

        // Check if the action performed is ‘paging’ and if the current page has been stored in global variable 

        if (args.requestType === "paging" && pages.indexOf((args as PageSettingsModel).currentPage) !== -1) { 

            // the current page rows are selected 

            grid.selectRows(pageCountRange); 

        } 

} 

We have prepared a sample based on this for your reference. You can find it below, 

Sample: https://stackblitz.com/edit/etfvb2?file=index.ts  

API links: https://ej2.syncfusion.com/documentation/api/grid/#load  

                  https://ej2.syncfusion.com/documentation/api/grid/#headercellinfo  

                  https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete 

                  https://ej2.syncfusion.com/documentation/api/grid/#selectrows  

Note: The persistSelection need not be enabled for this as we are dynamically persisting the selection for required page rows in sample-level. Using the above approach the dynamic persist selection is done only when the check all action is performed and so the individual row check will not be persisted. 

Please get back to us if you require any further assistance. 

Regards, 

Sujith R 

[Tomasz]

Hi, a use this two methods 

let selectedRows = mainGrid.getSelectedRecords();
let currentView = mainGrid.getCurrentViewRecords();

and then i subtracted currentView from selectedRows :) it is most simply way :)

Regards.

[Sujith Kumar Rajkumar]

Hi Tomasz, 

We are glad to hear that your query has been resolved. 

Please get back to us if you require any further assistance. 

Regards, 

Sujith R