Checkbox changes not firing toolbarClick event

Question

Hello, I've tried adding a custom checkbox to the toolbar using ej2-buttons. The checkbox appears but has no handlers attached to it when I click on it. How do I also allow an input to fire the toolbarClick event?

Here's the basics of my code:

```javascript

import { GridComponent, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { CheckBox } from '@syncfusion/ej2-buttons';

function App() {

const templateCheckbox = new CheckBox({ label: 'Click', checked: false })

const toolbarOptions = [

{ type: 'Input', template: templateCheckbox, id: 'show-archived' },

]

const toolbarClick = (args) => {

console.log(args)

}

return (

...data

</GridComponent>

)

}

```

Vignesh Natarajan · Accepted Answer

Hi Andy,  
 
Thanks for contacting Syncfusion support.  
 
Query: “ The checkbox appears but has no handlers attached to it when I click on it. How do I also allow an input to fire the toolbarClick event?” 
 
We suggest you to achieve your requirement using change event of CheckBox component. Instead of Grid toolbarClick event, we have suggested you to define the change event to CheckBox component and handle the action inside it.  
 
Refer the below code example. 
 




const templateCheckbox = new CheckBox({ 
      label: 'Click', 
      checked: false, 
      change: this.onChange.bind(this), 
    }); 
 
     
  } 
  onChange(args) { 
    //will be triggered when changing the state of checkbox in grid toolbar 
    debugger; 
  } 
 
   
Refer the below sample for your reference 
 
Sample: https://stackblitz.com/edit/react-vitg7p?file=index.js  
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan

Andy · Answer

Okay great thanks for this I'll try it out.

Rajapandi Ravi · Answer

Hi Andy, 

We will wait to hear from you. 

Regards, 
Rajapandi R