TreeGrid toolbar customization

[PDev]

I have following requirement, if possible can you prepare some example for it ? 

1. Column resize should happen in edit mode
2. when taking mouse between 2 columns, icon should appear which only comes when you actually drag column for resizing.
3. Wanted to add Tooltip for Toolbar button, for which i have following code which is not working. in below i have mix of our of box buttons and custom buttons. where 10th button on toolbar is the one where i wanted to add tooltip

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

(items.childNodes[0] as any).children[9].querySelector(".e-tbar-btn e-tbtn-txt e-control e-btn e-lib").title = "update"

[Farveen Sulthana Thameeztheen Basha]

Hi Parth Rawal,

Queries	Solution
Column resize should happen in edit mode	From your query we suspect that you need to perform Resize action on Edited cell. But we don’t have support to perform both actions together. We can perform resize action once the editing action gets complete.   If your requirement is different from above, please share details to proceed further
when taking mouse between 2 columns, icon should appear which only comes when you actually drag column for resizing.	While performing Resize action, resize icon shows while hovering over the corresponding column only.   Documentation link:- https://ej2.syncfusion.com/angular/documentation/treegrid/columns/column-resizing/   Demo link:- https://stackblitz.com/edit/angular-wrrmmi?file=app.component.html   Please share video demo or detailed Explanation about your requirement.
Wanted to add Tooltip for Toolbar button, for which i have following code which is not working.	1#Default Toolbar From your query you need to change the Tooltip for Default Toolbar Icons. We have achieved your requirement by using “Localization” library which allows us to localize the default text content of Tree Grid. We have already discussed the same in the below UG help documentation. https://ej2.syncfusion.com/angular/documentation/treegrid/global-local/#localization    Refer to the code below:-  App.Component.ts    import { L10n } from '@syncfusion/ej2-base';                L10n.load({                  'en-US': {                      treegrid: {                          EmptyRecord: 'Searched data is not found in Tree Grid',                          Add: 'NewRow',                          Delete: 'Remove',                          Update: 'Modify',                          Cancel: 'CancelEdit',                      },                  },              });    Sample Link:-  https://stackblitz.com/edit/angular-pysmi2?file=app.component.html,app.component.ts   2 #CustomToolbar Otherwise if you want to change Tooltip of the Custom Toolbar button, you can change the tooltipText property of the Toolbar Items.   App.component.ts   ngOnInit(): void {     this.data = sampleData;     this.pageSettings = { pageSize: 10 };     this.toolbar = [       {         text: 'custom column chooser',         tooltipText: 'column chooser',     // For custom toolbar items change tooltipText         id: 'toolbarcolumnchooser',       },     ];   }     Modified code of yours:-   From your provided code you can change the Tooltip by setting title attribute for the corresponding Id of the Toolbar button. document.getElementById('_gridcontrol_add').setAttribute('title', '_new content_');      //add Id for the Toolbar Items   You can follow anyone of the above solution to achieve your requirement.

Regards,

Farveen sulthana T

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.