Hi
Saidaniyosra,
Thanks for
contacting syncfusion forum.
Query: I would to add a SwitchComponent to the toolbar of
gridComponent
We achieved your query by using the
toolbar template feature and toolbar click event of the treegrid component. In
the toolbar click event will triggers, when
toolbar item is clicked.
Please
refer to the below code example,
|
<TreeGridComponent
dataSource={treesampleData}
treeColumnIndex={1}
childMapping="subtasks"
height="350"
allowPaging={true}
allowFiltering={true}
toolbar={this.toolbarOptions}
ref={(treegrid) => (this.treegridObj = treegrid)}
toolbarClick={this.toolbarClick.bind(this)}
filterSettings={{ type: 'Menu' }}
pageSettings={{ pageSize: 11 }}
……..
toolbarOptions = [
'ExpandAll',
'CollapseAll',
{ text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'filter' },
{ type: 'Input', template: this.templateswitch, id: 'switchcom' },
];
toolbarClick(args) {
if (args.item.id === 'filter') {
this.treegridObj.filterByColumn('taskName', 'startswith', 'Testing');
} else if (args.item.id == 'switchcom') {
//here
you handle switch component
alert('This is Switch component change event');
}
}
…..
templateswitch = new Switch({
label: 'Click',
checked: false,
change: this.onChange.bind(this),
});
|
Please refer to the below sample,
https://stackblitz.com/edit/react-sbdirp?file=package.json,index.js
Please refer to the below API documentation,
https://ej2.syncfusion.com/documentation/api/treegrid#toolbarclick
Kindly get back to us for further assistance
Regards,
Pon selva
