Treegrid toolbar

[Ashok kumar]

How do i change the build in toolbar(Add, Edit, Delete) icon and the text?

If not can i append the built in action(Add, Edit, Delete) to my custom icon?

[Farveen Sulthana Thameeztheen Basha]

Hi Ashok kumar, 

Thanks for contacting Syncfusion Support. 

 

Query#:- How do i change the build in toolbar(Add, Edit, Delete) icon and the text? 

 

We have checked your query and we can customize the default Toolbar Icons by overriding the exisiting the CSS for the Toolbar Icons. Also we have changed the Text of the Toolbar Icons with Created event of the TreeGrid. In this event we have get the corresponding Toolbar Icon and changed the Text by changing the textContent of that Icon. 

Refer to the code example:- 

   <style> 

       .e-treegrid .e-add::before{ 

           content: '\e609'; 

        } 

   

        /*Changes the delete button icons*/ 

        .e-treegrid .e-delete::before { 

            content: "\e680"; 

        } 

        /*Changes the save button icons*/ 

       

        .e-treegrid .e-update::before { 

            content: "\e600"; 

        } 

        /*Change the cancel icons*/ 

        .e-treegrid .e-cancel::before { 

            content: "\e700"; 

        } 

     </style> 

 

 

App.Component.html 

<ejs-treegrid #treegrid [dataSource]='data' height='400' childMapping='subtasks' [treeColumnIndex]='1' (created)="created($event)"   [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

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

                .   .     . 

           </e-columns> 

</ejs-treegrid> 

 

App.Component.ts 

 

             created(e){ 

            let items = this.treegrid.toolbarModule.getToolbar().children[0];      

            items.childNodes[0].querySelector(".e-tbar-btn-text").textContent = "AddNew"; 

            items.childNodes[1].querySelector(".e-tbar-btn-text").textContent = "DeleteRecord";    

            items.childNodes[2].querySelector(".e-tbar-btn-text").textContent = "UpdateRecord"; 

            items.childNodes[3].querySelector(".e-tbar-btn-text").textContent = "CancelRecord"; 

 

        } 

 

Sample Link:-  https://stackblitz.com/edit/angular-7s3hz7-ojqvnk 

 

Screenshot:- 

 

 

Refer to the API Link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#created 

 

Please get back to us if you are facing any difficulties on this. 

 

Regards, 

Farveen sulthana T 

[Ashok kumar]

Thank you. It helps fixing my problem

[Farveen Sulthana Thameeztheen Basha]

Hi  Ashok kumar, 

Thanks for your update. Please get back to us if you need any further assistance on it. 

Regards, 

Farveen sulthana T