1. Home
  2. Forum
  3. Angular - EJ 2
  4. Add a split button to the toolbar of TreeGrid

Add a split button to the toolbar of TreeGrid

Hi team,
Is there a way to add a split button to the toolbar of the TreeGrid? It seems only the built-in items and custom items work but the custom template does not?

Thanks in advance!

3 Replies 1 reply marked as answer
GL Gowri Loganathan Syncfusion Team August 26, 2020 11:06 AM UTC

  
  
Hi Ricardo, 
  
 
Thanks for using Syncfusion Products. 
 
Query: How to add split button to the toolbar in Tree Grid. 
 
We have achieved your requirement using template property of toolbar and in the below sample we have rendered a split button component in the toolbar using toolbarTemplate feature and the options were given as items for the split button. The split button component has select event which will be triggered when select the option values. Using the select event you can perform specific operations. 
 
Code 
Html page 
<ejs-treegrid #treegrid [dataSource]='data' [toolbar]='toolbar'> 
    <ng-template #toolbarTemplate let-data> 
        <ejs-splitbutton content="Splitbutton" [items]='items' (select)='onSelect($event)'></ejs-splitbutton> 
    </ng-template> 
    <e-columns> 
        ........... 
    </e-columns> 
</ejs-treegrid> 
Ts page 
import { Component, OnInit, ViewChild } from '@angular/core'; 
import { ItemModel, MenuEventArgs } from '@syncfusion/ej2-angular-splitbuttons'; 
.......... 
export class AppComponent { 
    @ViewChild('treegrid') 
    public treegrid: TreeGridComponent; 
      ......... 
    public items: ItemModel[] = [  //define the split button items here 
        { 
            text: 'Option1' 
        }, 
        { 
            text: 'Option2' 
        }]; 
    public onSelect(args: any): void {  //define the operations to be performed while selecting the options from split button here 
        if (args.item.text === 'Option1') { 
           //do your custom actions here 
        } 
        if (args.item.text === 'Option2') { 
          //do your custom actions here 
        } 
    } 
    ngOnInit(): void { 
        this.data = sampleData; 
           ……….. . . 
    } 
} 
 
 
Please refer to the below sample link, 
 
Also please refer to the below help documentation and API links, 
 
Kindly get back to us if you need more assistance. We will be happy to assist you. 
 
Regards, 
Gowri V L 
 


RI Ricardo August 27, 2020 02:08 AM UTC

Thanks for your support.
How can I retain the built-in buttons of the Treegrid and the same time add the template of the split button? I try your suggestion at https://www.syncfusion.com/forums/151140/add-a-custom-dropdown-button-to-a-grid-toolbar but it does not work.
If it's not possible, is there a easy way I can replicate the feature of the built-in buttons with the custom one?

Thanks and regards.

GL Gowri Loganathan Syncfusion Team August 27, 2020 12:40 PM UTC

Hi Ricardo, 
  
Thanks for contacting Syncfusion Forum. 
  
Query: How can I retain the built-in buttons of the Treegrid and the same time add the template of the split button? 
  
We have achieved your requirement using template property of toolbar in Tree Grid. In the below sample we have rendered a split button using ng-template and bind the built-in toolbar items(“Edit”, “Update”) inside the split button using items property in the Tree Grid toolbar as shown in the screenshot below. 
  
Code 
  
Html page  
<ejs-treegrid #treegrid [dataSource]='data' [toolbar]='toolbar'>  
    <ng-template #toolbarTemplate let-data>  
        <ejs-splitbutton content="Splitbutton" [items]='items' (select)='onSelect($event)'></ejs-splitbutton>  
    </ng-template>  
    <e-columns>  
        ...........  
    </e-columns>  
</ejs-treegrid>  
  
Ts page  
  
import { Component, OnInit, ViewChild } from '@angular/core';  
import { ItemModel, MenuEventArgs } from '@syncfusion/ej2-angular-splitbuttons';  
  
…………….. . . 
export class AppComponent { 
    @ViewChild('treegrid') 
    public treegrid: TreeGridComponent; 
    public toolbar: any; 
    public editSettings: Object; 
    @ViewChild('template', { static: true }) 
    public toolbarTemplate: any; 
  
    public items: ItemModel[] = [   //define the split button items here 
        { 
            text: 'Edit' 
        }, 
        { 
            text: 'Update' 
        }]; 
    public onSelect(args: any): void { 
  
        if (args.item.text === 'Edit') { 
            this.treegrid.startEdit();   //call startEdit method to perform edit operation 
        } 
        if (args.item.text === 'Update') { 
            this.treegrid.endEdit();     //call endEdit method to perform save operation 
        } 
    } 
    ngOnInit(): void { 
         ………… .  . 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' }; 
        this.toolbar = ['Add', 'Delete', { template: this.toolbarTemplate }];   //define toolbar template to render cusom component 
    } 
} 
  
  
Screenshot 
 
  
We have prepared a sample with your requirement please refer it in the below link, 
  
Kindly refer the below API links, 
  
Please revert us if you need more assistance. We will be happy to assist you. 
  
Regards, 
Gowri V L 
 


Marked as answer
Loader.
Up arrow icon