[OutSystems Data Grid] Any way to modify the header tooltip of a column in Datagrid with JavaScript?
data-grid-reactive
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive

I have a DataGrid component with about 100+ columns. Each of these columns are assigned a week (ex: week 1 year 2022 etc.) and the header tooltip shows the monday of said week (ex: 03/01/2022 for the previous example). The thing is the week is a variable value, and although I found a way to code in JavaScript the column headers dynamically (see picture 1) , I have not been able to do this for the header tooltip, and I have to set the value one by one manually (see picture 2). This has became a problem and it is not feasable anymore. 

I would like to dynamically set the header tooltip property of a column with JavaScript.

Picture 1: example JavaScript code for changing header. I would like something similar to this but for the header tooltip. (Note: bindingPrefix is the column Id prefix and index is the column Id index. The concatenation of both is the column Id.)


Picture 2: Manual fix for Column header (Note: Having to copy paste this one by one is not feasable anymore, since the week number, in this case 27, has to be adapted to the column one by one)



Solution

Hello @Takeru Mazuelos 

I imagine you're not using the Column's block and are using an auto-generated grid since you can achieve that with the associated input:

You can set or change the tooltip on a column's header by accessing its headerTooltip attribute.
Based on the column's unique Id you can reach that by using the following script:

GridAPI.ColumnManager.GetColumnById("#COLUMN UNIQUE ID#")._configs.headerTooltip = "This is my new tooltip content";

Hope this can help you.

Cheers,
GM

Yes, this is perfect, Thank you!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.