|
export class ColumnMenuSample extends SampleBase {
constructor() {
super(...arguments);
this.groupOptions = { showGroupedColumn: true };
this.filterSettings = { type: "CheckBox" };
this.columnMenuItems = ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending', 'Group', 'Ungroup',’ColumnChooser’,’Filter’, { text: 'Reset', id: 'reset' }]; // default items with custom items
}
columnMenuClick(args) {
if (args.item.id === 'reset') {
console.log("To do here");
}
}
render() {
return (<div className='control-pane'>
<div className='control-section'>
<GridComponent id='gridcomp' dataSource={orderDetails} allowPaging={true} allowGrouping={true} allowSorting={true} allowFiltering={true} showColumnMenu={true} groupSettings={this.groupOptions} filterSettings={this.filterSettings} columnMenuItems={this.columnMenuItems} columnMenuClick={this.columnMenuClick.bind(this)}>
<ColumnsDirective>
. . .
</ColumnsDirective>
<Inject services={[Resize, Group, Sort, ColumnMenu, Filter, Page]} />
</GridComponent>
</div>
</div>);
}
}
render(<ColumnMenuSample />, document.getElementById('sample'));
| 
