Checkbox select row trigger recordClick

[Amanda]

Hi Syncfusion Team

I am trying to create a data grid that is able to:

1) Select individual/all rows by clicking on the checkbox selection

2) Able to click on row to trigger certain function to get row data

The Grid component has recordClick assigned the function and trigger correctly. However, everytime i try to select a single row by clicking on the checkbox, for some unknown reason it triggers the function too.

Is there any way that i can select individual/all rows without trigger the function and also able to recordClick without interferring with each other?

Example code:

https://codesandbox.io/s/laughing-poincare-uojz1?file=/src/App.tsx:889-900

[Praveenkumar Gajendiran]

Hi Amanda,

Greetings from Syncfusion support.

We checked your query, based on that we suggest you to prevent the recordClick event when the target cell is the checkbox column cell to achieve your requirement. This is demonstrated in the below code example.

Code Example: 

 const recordClick = (args: RecordClickEventArgs | undefined) => { 

    if (!args?.cell?.classList.contains("e-gridchkbox")) { // prevent the recordClick event when the target cell is the checkbox column cell 

      if (args?.rowData) { 

        console.log(args.rowData); 

        const caseId = (args?.rowData as any).id; 

      } 

    } 

  }; 

 

We have modified your provided sample based on this for your reference.

Sample: https://codesandbox.io/s/modest-blackburn-fswk9?file=/src/App.tsx

Please get back to us if you need further assistance.

Regards,
Praveenkumar G 

[Amanda]

Hi Praveenkumar

It is working, thank you for your help

Regards

Amanda

[Praveenkumar Gajendiran]

Hi Amanda, 

You are welcome. We glad that the provided solution resolved your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Praveenkumar G