DataTree Lines, programming examples of DataTree Lines

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

/*
  This sample shows how you can vertical lines to the tree presentation.
*/


webix.ui({
  rows:[
    {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>

How to create a stylized DataTree type with lines?

Download Webix UI Framework

Study Tree Documentation

Check out Tree Widget Features