Menu on custom toolbar actions
Hi, is there a way to show a menu (like the column chooser) on custom actions in the toolbar?
I want the user to be able to choose what method of filtering to use.
I have come closer by using the toolbar template. But is there a way to use the default ColumnChooser in combination with the template?
Hi Niels,
Greetings from Syncfusion support
After reviewing your shared information, we understand that you want to show a menu in the custom toolbar item with the combination of default column chooser and using this menu you like to choose the type of Filter and set it to the Grid. You can display both built-in and custom toolbar items in the Grid. Please refer the below documentation for more information.
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/tool-bar-items#both-built-in-and-custom-items-in-toolbar
Based on your query we have prepared the sample and achieved your requirement
by using the template
property of the custom toolbar item. In this template, we have rendered the
DropdownButton control and based on the item selection, using the select
event of DropdownButton we have set the filter type to the Grid. Please refer
the below code example and sample for more information.
|
App.component.ts
export class AppComponent { @ViewChild('grid') public grid: any;
public items: any = [ { text: 'Menu' }, { text: 'Excel' }, { text: 'FilterBar' }, { text: 'CheckBox' }];
select(args: any) { //select event of DropdownButton this.grid.filterSettings.type = args.item.text; //set the filter type to the Grid based on the selected item }
ngOnInit(): void { this.filterSettings = { type: 'Menu' }; //here we have defined both built and custom toolbar item. Using the template property we can render our DropdownButton in the toolbar this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ColumnChooser', {text: 'Filter Type', template: "#buttonmenu"}]; } }
App.component.html
<button id="buttonmenu" ejs-dropdownbutton [items]='items' (select)='select($event)' content='FilterType'></button>
|
Screenshot:
Please get back to us if you need further assistance.
Regards,
Rajapandi R
