Disable tooltip in toolbar

[Toan Bui]

Hi, have a nice day! I want to disable tooltip in toolbar because I think it isn't necessary. Can you help me?

[Manivel Sellamuthu]

Hi Toan, 

 

Greetings from Syncfusion support. 

 

By default in Toolbar if we are not defining tooltipText will not show tooltip. Please refer the below code example and sample for more information. 

 

<div class="control-section e-tbar-section"> 

    <div class="e-sample-resize-container"> 

        <!-- Render the Toolbar Component --> 

        <ejs-toolbar> 

            <e-items> 

                <e-item prefixIcon='e-cut-icon tb-icons'></e-item> 

                <e-item prefixIcon='e-copy-icon tb-icons'></e-item> 

                <e-item prefixIcon='e-paste-icon tb-icons'></e-item> 

                <e-item type='Separator'></e-item> 

                <e-item prefixIcon='e-bold-icon tb-icons' tooltipText='Bold'></e-item> 

                <e-item prefixIcon='e-underline-icon tb-icons' tooltipText='Underline'></e-item> 

            </e-items> 

        </ejs-toolbar> 

    </div> 

</div> 

 

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

 

If you want to hide the tooltip text in the Grid Toolbar you can achieve your requirement by using the below solution. In the below sample we have removed  the tooltipText of the toolbar items in the created event and refreshed the toolbar items in the dataBound event using flag variable. Please refer the below code example and sample for more information. 

 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data' allowPaging='true' (created)="created($event)" (dataBound)="dataBound()"  

[pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

         . . . 

        </e-columns> 

    </ejs-grid> 

</div> 

export class AppComponent { 

    @ViewChild ('grid', {static: true}) 

    public grid: GridComponent; 

    public flag = true; 

 

 . . . 

    created() { 

        this.grid.toolbarModule.toolbar.items.forEach((e)=>{e.tooltipText = ''}); 

    } 

 

    dataBound () { 

        if (this.flag) { 

            this.flag = false; 

            (this.grid.toolbarModule as any).refreshToolbarItems() 

        } 

    } 

} 

 

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

 

Please let us know if you need further assistance. 

 

Regards, 

Manivel 

[Toan Bui]

I did it. Thank you so much. So can i do the same thing with treegrid?

[Farveen Sulthana Thameeztheen Basha]

Hi Toan, 

Thanks for your update. 

Query#:- So can i do the same thing with treegrid? 

 

Yes we have achieved the same in TreeGrid (hide the Tooltip text in TreeGrid Toolbar) using created and dataBound events of the TreeGrid. 

Refer to the code below:- 

App.Component.html:- 

 

<ejs-treegrid #treegrid [dataSource]='data' height='400' childMapping='subtasks' [treeColumnIndex]='1' 

[editSettings]='editSettings' [toolbar]='toolbar' (created)="created($event)" (dataBound)="dataBound()"> 

    <e-columns> 

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

                  [validationRules]='taskidrules'></e-column> 

        <e-column field='taskName' headerText='Task Name' width='180' editType='stringedit' 

                  [validationRules]='tasknamerules'> 

            </e-column > 

            .  .   . 

     </e-columns > 

</ejs-treegrid > 

 

App.Component.ts 

export class AppComponent { 

    public data: Object[] = []; 

    public editSettings: Object; 

    public toolbar: string[]; 

    @ViewChild('treegrid') 

    public treegrid: TreeGridComponent; 

 

   created() { 

      this.treegrid.grid.toolbarModule.toolbar.items.forEach(e => { 

        e.tooltipText = ''; 

        }); 

    } 

 

  dataBound() { 

     if (this.flag) { 

       this.flag = false; 

       this.treegrid.grid.toolbarModule.refreshToolbarItems(); 

      } 

    } 

Sample Link in TreeGrid:- https://stackblitz.com/edit/angular-gffl7f-jxsza8?file=app.component.html 

API links:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#databound 

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#created 

 

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

Regards, 

Farveen sulthana T 

[Toan Bui]

I did it. Thank you so much

[Farveen Sulthana Thameeztheen Basha]

Hi Toan,  

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

Regards, 

Farveen sulthana T