Tree with Custom Icons, programming examples of Tree with Custom Icons

/*
  You can provide custom icons for the tree nodes.
*/

var data_with_icon = [
  	{ id:"root", value:"Films data", image:"home", open:true, data:[
    	{ id:"1", open:true, image:"rss", value:"The Shawshank", data:[
      		{ id:"1.1", image:"puzzle", value:"Part 1" }
    	]}
  	]}
];

webix.ui({
  height:400,
  rows:[
    {cols:[
      {
        view:"tree",
        type:"lineTree",
        select:true,
        template:"{common.icon()} <img src='//docs.webix.com/samples/17_datatree/03_styles/icons/#image#.png' style='float:left; margin:3px 4px 0px 1px;'> #value#",
        data: webix.copy(data_with_icon)
      },
      {
        view:"tree",
        type:"lineTree",
        select:true,
        template:"{common.icon()} {common.folder()}<img src='//docs.webix.com/samples/17_datatree/03_styles/icons/#image#.png' style='float:right; margin:3px 4px 0px 1px;'> #value#",
        data: webix.copy(data_with_icon)
      },
      {
        view:"tree",
        type:"lineTree",
        select:true,
        template:function(obj, com){
          var icon = obj.$count ? com.folder(obj, com) : ("<img src='//docs.webix.com/samples/17_datatree/03_styles/icons/"+obj.image+".png' style='float:left; margin:3px 4px 0px 1px;'>");
          return com.icon(obj, com) + icon + obj.value;
        },
        data: webix.copy(data_with_icon)
      }
    ]}
  ]
});