Treetable dynamic icons

Webix JS
#1

I have a requirement where I need display a different image icon based on the type of content in the row. I have been able to do this by using a function with the following defintion of the column.

 { id: "fullName", header: "Name", template: getColumnTemplate }

The function getColumnTemplate looks like this :

function getColumnTemplate(obj, common) {
  var nodeType = obj.nodeType;
  var imageName;
  var value = obj.node.fullName;
  if (nodeType == "Java") {
    switch (obj.node.serviceType) {
      case "java":
        imageName = "java.gif";
        break;
      case "other":
        imageName = "other.gif";
        break;
      default:
        imageName = "unknown.gif";
    }
  } else if (nodeType == "C") {
    imageName = "c.gif";
  }
  var imgTag = "<img src=\"icons/" + imageName + "\" style=\"margin-right:5px\">";
  var str = common.space(obj, common) + common.icon(obj, common) + imgTag + obj.node.fullName;
  return str;
};

This all works but the treetable flashes when I scroll or when I open and the close the nodes.

So my question is why is this happening and is this the right way to accomplish dynamic icons based on row content ?

#2

try to set fixed width / height to your imgTag:

  var imgTag = '<img src="icons/' + imageName + '" style="margin-right:5px;width:16px;height:16px;" />';
#3

Setting the fixed width and height does not fix the problem. The image and the open/close icons still flash when scrolling or opening and closing rows.

#4

Changing the code use a DIV with background images fixed the problem.