The programming sample below demonstrates how to create a stylized DataTree type without icons. Don't miss the chance to use our free code samples to make custom business applications.
/* You can hide the icons of the tree nodes. In this sample the icons are hidden in the left tree. */ webix.ui({ rows:[ {cols:[ { view:"tree", type:"lineTree", template:"{common.icon()} #value#", data: webix.copy(smalltreedata) }, { view:"tree", template:"{common.folder()} #value#", data: webix.copy(smalltreedata) } ]} ] });
<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>