Add a custom dropdown button to a grid toolbar

Arnaud

Asked On January 31, 2020 09:33 PM UTC

I want a dropdown list in the toolbar of the grid, like the columnChooser eg, I tried several options, but nothing works?

Thnxs in advanced

Reply | Reply with quote

Balaji Sekar [Syncfusion]

Replied On February 3, 2020 11:04 AM UTC

Hi Arnaud,

Greetings from Syncfusion.

Query#: Need dropdown list in the toolbar of the grid,

We have analyzed your query and prepared sample based on your requirement. In that sample we have rendered a dropdown button component in the toolbar using toolbarTemplate feature and the options were given as items for the dropdown. The dropdown component has select event which will be triggered when select the option values. Using the select event we have performed some of the operations in the Grid like editing, updating, deleting of particular row. Documentation and sample link shared to know more about the DropdownButton component.

Code snippet:

App.component.ts

public onSelect(args: any): void {

if(args.item.text === 'Update'){

this.grid.endEdit();

}

if(args.item.text === 'Edit'){

this.grid.selectRow(0);

this.grid.startEdit();

}

if(args.item.text === 'Delete'){

this.grid.selectRow(0);

this.grid.deleteRow(this.grid.getContent().querySelectorAll('.e-row')[0] as any);

}

App.component.html

<ng-template #toolbarTemplate let-data>

<button ejs-dropdownbutton [items]='items' (select)='onSelect($event)' content='Edit Options'></button>`

</ng-template>

Sample Link: https://stackblitz.com/edit/angular-uwh2zb-casjff?file=app.component.html

Documentation Links:

https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/?no-cache=1#custom-toolbar

https://ej2.syncfusion.com/angular/documentation/api/drop-down-button/#select

https://ej2.syncfusion.com/angular/documentation/drop-down-button/getting-started/#running-the-application

Please get back to us, if you need further assistance.

Regards,

Balaji Sekar.

Reply | Reply with quote

Arnaud

Replied On March 2, 2020 07:44 PM UTC

Thnxs,

But the default Toolbar is gone. I want to comine it with the builtin actions eg ColumnChooser and SearchBox

Is that possible?

Regards,

Arnaud

Reply | Reply with quote

Balaji Sekar [Syncfusion]

Replied On March 3, 2020 06:21 AM UTC

Hi Arnaud,

Query: “I want to combine it with the builtin actions e.g., ColumnChooser and SearchBox. Is that possible?”

Yes, we can combine the the built-in toolbar items with custom components in the Grid toolbar. In below code example we have add custom component using template property of toolbar component in Grid.

Please refer the below code example and sample for more information.

<ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'>

. . . .

</ejs-grid>

<ng-template #template let-data>

<ejs-checkbox label="Checkbox" [indeterminate]="true"></ejs-checkbox>

</ng-template>

@ViewChild('template')

public toolbarTemplate: any;

@ViewChild('template2')

public sliderTemplate: any;

public ngOnInit(): void {

this.data = orderDetails;

this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };

this.toolbar = ['Add', 'Edit', 'Delete', ‘Search’, {template: this.toolbarTemplate}, {template: this.sliderTemplate}];

. . . . .

}

Sample : https://stackblitz.com/edit/angular-ekft7w-1oavut?file=app.component.ts

Please get back to us if you need further assistance on this.

Regards,

Balaji Sekar.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
151140	Jan 31,2020 09:33 PM UTC	Mar 3,2020 06:21 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US