Hello, in our current project we would like to display a tooltip on certain cells depending on their value. For instance if you have a cell with an amount to pay we would like to display the value of the bank account number. Value that is in another column hidden by default. So we want to make visible the Bank account number by hovering the amount to pay if there is an amount to pay in the cell.
We tried several JS scripts to at least display something (adding a title tag for instance) nothing is working in the data grid.
Does anyone have a solution?
Hi @Julien Crepin ,
I created a solution for you using a few of the articles referenced in this thread.
When you mouseover a cell with the value "DUP" then you have this pop-up which concatenates all the data of the row. You can customize the conditional statement and string to populate it with the message you want.
If your data grid explicitly defines columns using the "Text Column" type blocks then you need to ensure that the references to the row data contain the binding name, which is usually in the format of "Entity.Attribute". So in the JavaScript below you will see references to "row._data.Julien.A", "row._data.Julien.B" and so on. If you are not defining columns, then you can remove the Entity name and just reference the column name "row._data.A", "row._data.B", and so on.Within an OnReady screen event, place a JavaScript block with the following:
const grid = OutSystems.GridAPI.GridManager.GetActiveGrid();const tooltip = new wijmo.Tooltip();tooltip.showAtMouse=true;
function mouseOverHandler(e,grid) { //console.log(e); let ht = grid.provider.hitTest(e); //console.log(ht);
//if hit type is a wijmo cell and the cell value is DUP if (ht.cellType == wijmo.grid.CellType.Cell && ht.target.textContent == 'DUP') { //Get the targeted cell let cell = grid.provider.cells.getCellElement(ht.row, ht.col); //console.log(cell); //Get the related row let row = grid.provider.rows[ht.row]; console.log(row);
//Create the tooltip string based on column binding let tts = row._data.Julien.Id.toString() + "" + row._data.Julien.A.toString() + "" + row._data.Julien.B.toString() + "" + row._data.Julien.C.toString();
//Create the tooltip string based on column names (when not using binding) //let tts = row._data.Id.toString() + "" + row._data.A.toString() + "" + row._data.B.toString() + "" + row._data.C.toString(); //console.log(tts); tooltip.setTooltip(cell, tts); }}function mouseLeaveHandler(e) { tooltip.hide();}grid.provider.hostElement.addEventListener('mouseover', (e)=> mouseOverHandler(e,grid));grid.provider.hostElement.addEventListener('mouseleave', (e)=> mouseLeaveHandler(e));
Hello Anthony, I can confirm this is exactly what was asked we applied your solution and it worked. Thank you all for your effort. Especially to @Navneet Garg , @Mihai Melencu and @Anthony Ouwehand.
Hi @Anthony Ouwehand, I have used the above JS it works, but i have a below problem.
It seems like the tooltip only attaches to rendered cells and doesn’t dynamically handle virtualized rows that appear after scrolling.
Any inputs here
Hey @Julien Crepin ,
The DataGrid is built on Wijmo FlexGrid. I found a few samples that include hover functionality on cells, which I hope will be helpful to you: Sample 1 / Sample 2.
There is also a cell note functionality that may be useful to you: Cell notes.
Hi,
Please check the link below.
https://www.outsystems.com/forums/discussion/81898/outsystems-data-grid-tooltips-on-each-outsystems-datagrid-column-cell/
Hello, thanks for sharing this. We already looked at it ad even if it is close it is not exactly what we need and on top of it we could make it work at all.
Can you provide more detail like share some screen shot or oml to understand the requirement better.
You can use tooltip element in datagrid and can use OnToggle.
You can write custom javascript as well but need the oml file to understand how the element is arranged and only after that I can write javascript accordingly.
Hello, you seems to show a normal table, we don't have problem to use tooltip on normal table. It is in the context of the data grid component that it gets tricky. Thanks for your help and effort, really appreciated.
Oh sorry for that I tried one solution and it is working with data grid.
check this it might help you.
var grid = OutSystems.GridAPI.GridManager.GetActiveGrid();
grid.provider.formatItem.addHandler(function(s,e) {
if(e.panel === s.cells) {
var col = s.columns[e.col]
if(col.binding === 'Entity1.Value') {
console.log(e.cell)
e.cell.title = "Test tooltip"
e.cell.addEventListener('click', function (event) {
// do something
console.log("hi from cell")
});
}
Hello thanks for your help. I tried to apply your script in my test grid I receive an errorAnd actually nothing is happening
can you please share your test grid oml so I can look in to it. did you added this script on grid GridOnInitialize method ?
Are you looking for something like this
Hi Julien,
Have a look at this link, hope it helps,
https://jozy-sohail.outsystemscloud.com/OutSystemsDataGridSample/CustomHeaderTooltip
Hello,We would like to have the tooltip on the cells itself not on the column header. Thanks for your time
Hi Julien Crepin,Please refer this link, it might be useful for your case,https://www.outsystems.com/forums/discussion/91183/outsystems-data-grid-tooltip-on-every-cell-of-particular-column-hardcoded-too/Thanks,Sahana