Stylized Tree Items, programming examples of stylized Tree items

Home
Examples
Stylized Tree Items

Stylized Tree Items, programming examples of stylized Tree items

Get this JavaScript programming example to stylize DataTree items. There are four options for styling DataTree items: standard styling; level-based styling (>2nd); applying CSS to the whole tree; applying CSS to specified data items. Pay attention to the fact that you can make free use of our code samples.

JS Code

var tpl = "<strong>Stylized Tree Items</strong><br><br>"+
   "1. Standard styling<br>" +
   "2. Level-based styling (>2nd)<br>" +
   "3. Applying CSS to the whole tree<br>" +
   "4. Applying CSS to specified data items"
    
webix.ui({
  rows:[
    {template:tpl,autoheight:true},
    {cols:[
      {
         view:"tree",
         select:true,
         data: webix.copy(smalltreedata)
      },
      {
         view:"tree",
            select:true,
            template: function(obj, common){
                if (obj.$level>2) {
                    return common.icon(obj,common)+common.folder(obj,common)+"<i>"+obj.value+"</i>";
                } else {
                    return  common.icon(obj,common)+common.folder(obj,common)+obj.value;
                }
            },
            data: webix.copy(smalltreedata)
      }]},
    {cols:[
      {
        view:"tree",
            css:"my_style",
            select:true,
            data: webix.copy(smalltreedata)
      },
      {
        view:"tree",
         data: [
          {id:"root", value:"Films data", open:true, data:[
            { id:"1", open:true, value:"The Shawshank Redemption", data:[
              { id:"1.1", value:"Part 1" },
              { id:"1.2", value:"Part 2", $css:"my_style" },
              { id:"1.3", value:"Part 3" }
            ]},
            { id:"2", value:"The Godfather", open:true, data:[
              { id:"2.1", value:"Part 1" },
              { id:"2.2", value:"Part 2", $css:"my_style" }
             ]}
          ]}
        ]
      }
    ]}
  ]
});

HTML Code

<style>
  .my_style  {
  	font-style: italic;
  	color:blue;
  }
</style>

<script>
var smalltreedata = [
    {id:"root", value:"Films data", open:true, data:[
		{ id:"1", open:true, value:"The Shawshank Redemption", data:[
			{ id:"1.1", value:"Part 1" },
			{ id:"1.2", value:"Part 2", data:[
				{ id:"1.2.1", value:"Page 1" },
				{ id:"1.2.2", value:"Page 2" },
				{ id:"1.2.3", value:"Page 3" },
				{ id:"1.2.4", value:"Page 4" },
				{ id:"1.2.5", value:"Page 5" }
			]},
			{ id:"1.3", value:"Part 3" }
		]},
		{ id:"2", open:true, value:"The Godfather", data:[
			{ id:"2.1", value:"Part 1" },
			{ id:"2.2", value:"Part 2" }
		]}
	]}
];
</script>

How to stylize DataTree items?

Download Webix UI Framework

Study Tree Documentation

Check out Tree Widget Features