Champion
29
Views
10
Comments
Solved
[OutSystems Data Grid] Tooltip on every cell of  particular column (Hardcoded tooltip)- Datagrid Reactive
data-grid-reactive
Reactive icon
Forge component by Gonçalo Martins
Application Type
Reactive
Service Studio Version
11.54.22 (Build 62709)

Trying to show hardcoded tooltip on every cell of datagrid. Something like this:

My Current code with help of this and other discussions is :

I also tried with different query selections. But no luck.

There are three things:

1. If settimeout is not added, nodelist (elem) is empty. Even after settimout added not all nodes coming in nodelist.

2. Not showing tooltip every time and for every column. (I checked with changing color of cells and not all cells color is changing.)

3. I need hardcoded tooltip on one specific action column on every cell.

Is there any simple or inbuilt method to show hardcoded tooltip on cells (not on header only)?

Thanks in Advance for your help.

Solution

Hi Dorine,

I tried with some other code on OnAfter fetch but it is not working for all cells. 

I have written a new code  on OnInitialize event of datagrid reactive and it seems it is working nice and I can filter column as well, I have used "title" property of cell instead of wijmo tooltip. But, this is ok for now.

My code for reference if anyone need it in future:

Thanks a lot for your time and support. Really appreciate it.

Champion

Hello @Abdul

If you haven't checked this Post yet, please go through it,  

https://www.outsystems.com/forums/discussion/81898/outsystems-data-grid-tooltips-on-each-outsystems-datagrid-column-cell/

Also check this on Wijmo


Thanks
Tousif Khan

I mentioned same link in my description that I have checked this already.

Champion

Oh Sorry for that. Thanks but I checked a lot of discussions already.

Hi Abdul,

i think this could just be a timing problem (since you are trying to mitigate with SetTimeout and since it works for a portion of the cells)

When are you doing this (i.e. what event), and how sure are you the full list is already part of the DOM at that point ?

Some tips for troubleshooting : 

  • put the logic behind a button click instead of in a timeout to check out of it then works completely.
  • add some console.log statements inside the forEach() to follow what happens without having to step trough with a debugger

A Timeout is not the best of ways to deal with timing issues, I think, as it will possibly sometimes not wait long enough, and probably very often wait too long unnecessarily.

Maybe have a look at the OnInitialize event, but I'm not sure when exactly that falls for grids and how that works for things like server side pagination (if you would use any).

Also, You are setting many listeners, are you also cleaning them up at some point?

Dorine

Hi Dorine thanks for your reply. 

I am doing it on Grid onInitialization event. 

I tried with developer tool watch after some time and it give same number of nodeList. Will check with console and with button click as well.

Problem with button click is  sometime grid loads later (i.e. sorting, paging) so It will not work properly. 

For listeners, I have to set listener for every cell in the grid. For now, it is for whole grid but I am looking for a way to limit it to single column.

Btw, let me check with button click and find out how it works. It seems a good idea. Will update you. Thank you.

Ok, so the OnInitialize is  probably not the place to be, that's just the grid initialized, not the individual cells.

How about the OnAfterFetch of the grid data ?  If I do a quick test, it counts some cells there, but i'm not sure all, and 0 cells in OnInitialize.

Alternatively, you could probably try to capture the mouseactions of the entire grid and then determine what cell it is currently over.  (see this forge component of mine).  You would'nt even need javascript to create your listeners.

Dorine

Sure, let me check for forge component. It seems it can solve my problem.

Moving code to Onafterfetch bring tooltip to most of the rows but even now some rows in between not showing tooltip. 

Also I am not finding anyway in this script to filter it to apply on certain cells only because all cells having same cssclass and I am not able to add extra css class to one column (this is action column so no additionalconfig is there to add css.)

Thanks for your time and support.

Solution

Hi Dorine,

I tried with some other code on OnAfter fetch but it is not working for all cells. 

I have written a new code  on OnInitialize event of datagrid reactive and it seems it is working nice and I can filter column as well, I have used "title" property of cell instead of wijmo tooltip. But, this is ok for now.

My code for reference if anyone need it in future:

Thanks a lot for your time and support. Really appreciate it.

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