Icons in DataTree, programming examples of creating icons in DataTree

Home
Examples
Icons in DataTree

Icons in DataTree, programming examples of creating icons in DataTree

Do you want to create a nice DataTree style? The programming example below shows how to make a stylized DataTree type with icons. Don't hesitate to use free code samples by Webix to facilitate your web development process.

JS Code

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

webix.ui({
  rows:[
    {template:"<strong>Tree with Icons</strong>",height:50},
    {
      view:"tree",
      type:"lineTree",
      select:true,
      data: data_with_icon
    }
  ]
});

HTML Code

<style type="text/css">
  .webix_tree_home{
  	background-image: url(//docs.webix.com/samples/17_datatree/03_styles/icons/home.png)
  }
  .webix_tree_home:before{
  	content: ""
  }
  .webix_tree_puzzle{
  	background-image: url(//docs.webix.com/samples/17_datatree/03_styles/icons/puzzle.png)
  }
  .webix_tree_puzzle:before{
  	content: ""
  }
</style>

How to create icons in DataTree?

Download Webix UI Framework

Study Tree Documentation

Check out Tree Widget Features