Multiple images in column - "title" attribute issue

Hi there,

Can anyone help me with following? I’ve developed grid using dhtmlxgrid component. One of the column are images/icons aligned side by side. I did this by setting column type to “ro”-read only and building content of the cell as regular HTML. So far so good. Each of the icons markup looks similar to this one:

<a href="#" class="hms-report-road" title="This is hint for the icon" onclick="javascript: whatever"></a>

When grid is loaded, I can see my markup is correct, BUT when moving mouse pointer over the icon, “title” attribute goes blank and popup with hint is not shown. It seems to me that grid is trying to show default hint with “content” of the cell and does not work correctly.

Can anyone help me to solve that issue or maybe suggest better way to show multiple images in single column?


Try this,

yourGrid.attachEvent(“onMouseOver”, function(id,ind){
if (ind == “index column grid, your titles want to show”)
return false;
return true;

You can define the tooltip for your cell right in your xml:
html with images

or you may use the onMouseOver event:
myGrid.attachEvent(“onMouseOver”, function(id,ind){
this.cellById(id,ind).cell.title = “some new tooltip”;
return false;

I’m trying to populate cells with HTML, too. I’ve got my column type set to “ro” and I’m passing HTML markup as content, in the accepted JSON structure:
{“rows”:[{“id”:1,“data”:"<div class=“schedule_card”>\n <div style = “float:left; margin-right: 5em; padding-bottom:2em”>…
and then parsing that with mygrid.parse(data,“json”);

All that’s rendering in my cells is the first “<” character. Do I need to be doing any additional processing or pass my data in a different format?

Please, try to use:
{“rows”:[{“id”:1,“data”:["<div class=“schedule_card”>\n <div style = “float:left; margin-right: 5em; padding-bottom:2em”>… ]}]}

Thanks, sematik, that did the trick.

Thanks cobacoba. Your suggestion about attaching event worked fine.