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

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

Try our JavaScript programming example below to customize icons in DataTree. This piece of code will enable you to create a stylized DataTree type with custom icons. Don't miss the opportunity to make use of free coding samples by Webix to develop your own web applications.

JS Code

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({
  type:"space",
  height:400,
  rows:[
    {template:"<strong>Tree with Custom Icons</strong>",height:50},
    {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)
      }
    ]}
  ]
});