Add Indent & Outdent to TreeGrid Toolbar

[Luke Jacobsen]

The Gantt component's Toolbar contains the Indent & Outdent actions, whereas the TreeGrid toolbar does not.

Could you add these two controls to the TreeGrid toolbar please?

[Pon Selva Jeganathan]

Hi Luke, 

 

Thanks for contacting syncfusion forum.   

Query: Add Indent & Outdent to TreeGrid Toolbar

The treegrid toolbar contains indent and outdent icons. You can perform the indent/outdent operation using this toolbar icon.

Please refer to the below code,

selector: 'app-container', 

    template: `<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1'[toolbar]='toolbar' …… > 

    <e-columns> 

        <e-column field='taskID' headerText='Task ID' isPrimaryKey='true' width='90' textAlign='Right'></e-column> 

        …….. 

    </e-columns> 

            </ejs-treegrid>` 

}) 

export class AppComponent implements OnInit { 

 

public data: object; 

public toolbar: any; 

ngOnInit(): void { 

    this.data = sampleDa; 

     

    this.toolbar = [ 

        "Add", 

        "Edit", 

        "Cancel", 

        "Indent", 

        "Outdent" 

      ]; 

 

} 

 

  

Please refer to the below screenshot: 

1.Indent: 

In the screenshot below, we pick the taskId 3 and press the indent button. And it has shown that taskid 2 is the parent of taskid 3. 

 

2.Outdent: 

In the screenshot below, we pick the taskId 3 and press the outdent button. And it has shown that taskid 2 is not the parent of taskid 3. 

 

 

Please find the below sample link:  

https://stackblitz.com/edit/angular-phyqnb-srqqb1?file=app.component.ts

Kindly get back to us for further assistance.

 

Regards,   

Pon selva