Customize / remove tooltip on Grid Column Menu

1 Answer 616 Views
Grid
ANTONIO
Top achievements
Rank 1
Iron
Iron
ANTONIO asked on 12 Apr 2022, 12:35 PM

I want to know how could I customize the default tooltip shown by the column menu (https://stackblitz.com/run/?file=src/main.vue):

On this example, instead of the "ProductName Column Menu" tooltip text,  I'd like to display some other user friendly text, or just have this tooltip removed. Is it possible?

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 15 Apr 2022, 07:33 AM

Hi ANTONIO,

The discussed title in the column menu is available in the Grid's column menu rendering because of accessibility requirements. Below are the options I can suggest to you in dealing with the title. 

  • Option 1: Remove the Title using an approach similar to what is demonstrated in this StackBlitz example.
  • Option 2: Modify the text of the titles using the localization provider which is part of the Kendo UI for Vue Native suite.  Here is a StackBlitz example in which you can switch between three different languages. The language localization is achieved through the en-US.js, es.js, and fr.js files. In each of the mentioned files, you will find objects with messages definitions. To modify the title of the column menu, you can use the grid.columnMenu prop:
      'grid.columnMenu': 'This is custom text',
    With the above definition, the title of the column menu will be "Column Name" + the test defined using the above property. 

Please check the above options and let me know if they help you achieve what you need in the application you are working on.

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ANTONIO
Top achievements
Rank 1
Iron
Iron
commented on 20 Apr 2022, 05:17 PM

Hi Petar! Thanks for the provided solution, it worked perfectly!
Petar
Telerik team
commented on 21 Apr 2022, 04:05 AM

Hi, Antonio. 

I am happy to hear that the suggested options have helped you implement what you need in your application.

Tags
Grid
Asked by
ANTONIO
Top achievements
Rank 1
Iron
Iron
Answers by
Petar
Telerik team
Share this question
or