Stylized Tree Items, programming examples of 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>