How to disable a column click from triggering row selection

[Ryan Ngoh]

I have a custom checkbox column made using queryCellInfo and rendering a react component checkbox. This checkbox has separate functionality from selecting a row from the grid. When I have a row selected and click the checkbox (on the same or different row), it clears my selected row. I want to keep the row selected but be able to toggle the checkbox without it clearing the selected row. 

[Madhu Sudhanan P]

Hi Ryan, 

Thanks for contacting Syncfusion support. 

We have prepared a sample based on your requirement in which selecting/deselecting is prevented by using rowSelecting and rowDeselecting event as follows. 

export class Default extends SampleBase { 

  target; 

  load(e) { 

    this.element.onclick = (e) => { 

      this.target = e.target; 

    } 

  } 

  deselecting(e) { 

    if (this.target.classList.contains('custom')) { 

      this.target = null; 

      e.cancel = true; 

    } 

  } 

    render() { 

        return (<div className='control-pane'> 

        <div className='control-section'> 

          <GridComponent dataSource={orderDetails} height='350'  

          rowSelecting={this.deselecting}  

          rowDeselecting={this.deselecting}  

          load={this.load}> 

           ..... 

          </GridComponent> 

        </div> 

      </div>); 

    } 

} 

https://stackblitz.com/edit/react-checkbox-deselect?file=index.js 

Regards, 

Madhu Sudhanan P 

[Ryan Ngoh]

Thanks. I didn't do exactly what you did because I needed to pass state to a react component but I got it working. 

[Madhu Sudhanan P]

Hi Ryan, 

We are glad that your requirement has been achieved. 

Regards, 

Madhu