DataTree Lines, programming examples of DataTree Lines

DataTree Lines, programming examples of DataTree Lines

Check out this JavaScript programming example for creating a stylized DataTree type with lines. JavaScript Tree UI widget is a powerful tool that allows presenting hierarchically organized information in a logical manner. You can improve the way your data is organized by using our free coding samples.

JS Code

webix.ui({
  rows:[
    { 
      template:"<strong>Stylized DataTree Type</strong>", 
      type:"header"
    },
    {cols:[
      { 
        view:"tree",
        select:true,
        ready:function(){
          this.select("1.2");
        },
        data: webix.copy(smalltreedata)
      },
      {
        view:"tree",
        type:"lineTree",
        select:true,
        ready:function(){
          this.select("1.2");
        },
        data: webix.copy(smalltreedata)
      }
    ]}
  ]
});


HTML Code

<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>