Hi Team, I want to perform some operations when we click on the Select All checkbox.
This is what my grid looks like.
This is the code for the same.
Expecting a quick response. Want to catch the select all row event.
Thanks.
Hi Animesh,
Greetings from Syncfusion support.
We have reviewed your query and found a solution to your requirement. We have added a click event listener to the grid instance inside the created event of the Grid and used a condition to get the select all checkbox click. The code snippet to achieve this is provided below.
[index.js]
function created () { gridInstance.element.addEventListener('click', (args) => { if (args.target.closest(".e-headercell") && args.target.closest(".e-checkbox-wrapper")) { console.log("Select All checkbox clicked!"); } }) }
<GridComponent dataSource={data.slice(0, 5)} ref={grid => gridInstance = grid} selectionSettings={selectionsettings} created={created}>
|
Sample: https://stackblitz.com/edit/react-oxpk6h?file=index.js
API: https://ej2.syncfusion.com/react/documentation/api/grid/#created
Please let us know if you have any other queries or concerns.
Regards,
Santhosh I
Hi Santhosh, thanks for the solution but it doesn't solve my problem 100%.
How can I check whether the checkbox is checked or not? Because that will decide my action.
Please let me know how can I check whether the select all checkbox is checked or not.
Thanks
Animesh
Animesh,
You can differentiate the SelectAll click while performing the check/uncheck the rows by using the below condition. Please refer the below code example and sample for more information.
function created () { gridInstance.element.addEventListener('click', (args) => { if (args.target.closest(".e-headercell") && args.target.closest(".e-checkbox-wrapper")) { if(args.target.closest(".e-checkbox-wrapper").querySelector('.e-check') != null) { console.log("Select All checkbox clicked and checked the rows!"); } else { console.log("Select All checkbox clicked and Unchecked the rows!"); }
} }) }
|
Sample: https://stackblitz.com/edit/react-oxpk6h-2lqcbk?file=index.js
Thanks, team.
The solution is working fine for me.
Hi Animesh,
We are glad that the provided solution helped to solve the issue. Please get back to us for further assistance.
We are marking this thread as solved.
Regards,
Suganya Gopinath.