126
Views
8
Comments
Solved
[OutSystems Data Grid] tooltips on each Outsystems Datagrid column cell
data-grid-reactive
Reactive icon
Forge component by Gonçalo Martins
Application Type
Reactive

Greetings everyone,

Is there a way to insert a tooltip into a column's cells dynamically? The header tooltip seems to be built in, but I need to target the actual content of the cells and put a tooltip in there.


Many thanks in advance!



Solution

Hey and thank you for your response.


I am not too familiar with wijmo, but this is what I've tried so far according to this documentation: https://www.grapecity.com/wijmo/api/classes/wijmo.tooltip.html

I've tried both the manual setup and the automatic setup, it doesn't seem to throw any errors, but no tooltip is displayed.

The use case is we want to show further contextual information for a cell's value. For example, it could be a Person's name being in a cell, and we want to show the address, city etc in a tooltip.


Edit: After further testing, it did seem to work afterall.

Hi @Gert Poulsen 

By setting the tooltip dynamically you mean setting the content for each cell instead of the header?

Currently, I think we don't have that but I would like to get more details about your use case and, also ask for the findings you already got from looking at Wijmo's documentation and using the Data Grid APIs.

Cheers,
GM

Solution

Hey and thank you for your response.


I am not too familiar with wijmo, but this is what I've tried so far according to this documentation: https://www.grapecity.com/wijmo/api/classes/wijmo.tooltip.html

I've tried both the manual setup and the automatic setup, it doesn't seem to throw any errors, but no tooltip is displayed.

The use case is we want to show further contextual information for a cell's value. For example, it could be a Person's name being in a cell, and we want to show the address, city etc in a tooltip.


Edit: After further testing, it did seem to work afterall.


Hello @Gert Poulsen 

I followed a similar approach but in terms of events, to make it more aligned with the implementation that exists in the OutSystems Data Grid framework (the one used for headers and when the cell content is larger than the cell width) using the mouseenter /mouseout. Also, added a sanitization method to protect from XSS attacks when using the inner HTML directly:

Hope it helps.

Best Regards,
GM


EDIT: Use this in the Grid block OnInitialize event

Hey Gonçalo,


Does the logic break for you when you adjust the columns? (resize, remove and add etc)


Cheers

Gert Poulsen

Hello @Gert Poulsen 

Those operations work as expected as you can see in the GIF attached.
The only situation I could not figure out is after doing several steps and mostly after opening or closing the browser Dev Tools, the last column sometimes loses the event.
Have you followed my suggestion? 

Cheers,
GM

EventTooltip.gif

can u share the oml of this?

Please share the OML

This is getting applied to all the cells of data grid. Do you know how we can do it for specific column cell only.

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