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

Event for Select all rows for Checkbox type of row

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.


5 Replies 1 reply marked as answer

SI Santhosh Iruthayaraj Syncfusion Team April 14, 2023 03:58 PM UTC

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(05)} 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



AD Animesh Dutta April 17, 2023 10:30 AM UTC

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



RR Rajapandi Ravi Syncfusion Team April 18, 2023 12:16 PM UTC

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


Marked as answer

AD Animesh Dutta April 19, 2023 09:56 AM UTC

Thanks, team.

The solution is working fine for me.



SG Suganya Gopinath Syncfusion Team April 20, 2023 07:31 AM UTC

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. 


Loader.
Up arrow icon