We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid with pagination and header checkbox


Hi!

When I use the grid's selection function, the checkbox state and event can watch the actual page only ? 

For example I have a table with 3 pages, and when I click the checkbox on the header I want to select or deselect only the records on the actual page. And I would like to the checkbox (unchecked,check,stop) shows allways the actual page state. So If I selected all records on the first page the checkbox shows the "check" state, but If I move to the second  page, where I did not select anything then the checkbox shows the "unchecked" state and etc..

Regards,

Krisztian Csatai


5 Replies

RS Rajapandiyan Settu Syncfusion Team February 6, 2023 09:03 AM UTC

Hi Csatai,

Thanks for contacting Syncfusion support.


By default, the checkbox selection feature selects only the current page records. Please find the below documentation and sample for your reference.


Checkbox selection: https://ej2.syncfusion.com/react/documentation/grid/selection/check-box-selection/

Sample: https://stackblitz.com/edit/react-kcutvg?file=index.js

If you have any further questions or concerns, please let us know by sharing the following information:


  1. A detailed explanation of your requirements, along with a video demo.
  2. How you're binding data to the Grid.
  3. The type of data binding (local or remote) you're using, and the Adaptor details.
  4. The complete Grid code files and the package.json file.
  5. Whether you're using the persistSelection feature in the Grid.


Regards, 

Rajapandiyan S 



CK Csatai Krisztián February 6, 2023 12:15 PM UTC

Dear  Rajapandiyan,


Thank you the answer! I want to use with persistSelection flag. So when I set it true it does not work. That time the checkbox selected all the items.  So what I wrote on the top I meant that with persistSelection flag. 


Regards,

Krisztian Csatai 




RS Rajapandiyan Settu Syncfusion Team February 7, 2023 01:44 PM UTC

Hi Csatai,


In persist selection feature, checking the header checkbox selects whole records from all the pages for Local data binding. If you clear the selection from the header checkbox, it will clear the selection on all the pages. Since this is the default behavior of the persistSelection feature. The EJ2 Grid does not have the support to check/ uncheck rows only within the current page through the header checkbox.


Regards,

Rajapandiyan S



CK Csatai Krisztián February 8, 2023 08:10 AM UTC

Dear  Rajapandiyan,


Thank you!  Then can I control manually the header checkbox value (unchecked,check,stopsomehow ? 


Regards,

Krisztian Csatai 



RS Rajapandiyan Settu Syncfusion Team February 9, 2023 01:07 PM UTC

Hi Csatai,

Kindly share the below details to understand your requirement properly and check its feasibility with the Grid.


  1. Do you want the selection to persist when performing actions like sorting, filtering, or refreshing in the Grid?
  2. Would you like to select or deselect all records only on the current page when clicking the header checkbox?
  3. Do you want the header checkbox to be checked when all records are selected in the current page or only when all records are selected in all pages?
  4. Share the complete Grid code files and package.json file.


We look forward to hearing back from you soon.


Regards, 

Rajapandiyan S 


Loader.
Live Chat Icon For mobile
Up arrow icon