Custom Scroll in Tree, JavaScript Programming Example of Custom Scroll in Tree

Custom Scroll in Tree, JavaScript Programming Example of Custom Scroll in Tree

Massive DataTree with lots of elements requires smooth scrolling for the convenient data view. The code sample below shows how to create a decent scroll for big trees. Feel free to use this programming example for your web app.

JS Code

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", open:true, 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:"2.2.1", value:"Page 1" },
        { id:"2.2.2", value:"Page 2" },
        { id:"2.2.3", value:"Page 3" },
        { id:"2.2.4", value:"Page 4" },
        { id:"2.2.5", value:"Page 5" },
        { id:"3.2.1", value:"Page 1" },
        { id:"3.2.2", value:"Page 2" },
        { id:"3.2.3", value:"Page 3" },
        { id:"3.2.4", value:"Page 4" },
        { id:"3.2.5", value:"Page 5" },
        { id:"4.2.1", value:"Page 1" },
        { id:"4.2.2", value:"Page 2" },
        { id:"4.2.3", value:"Page 3" },
        { id:"4.2.4", value:"Page 4" },
        { id:"4.2.5", value:"Page 5" },
        { id:"1.2.1", value:"Page 1" },
        { id:"5.2.2", value:"Page 2" },
        { id:"5.2.3", value:"Page 3" },
        { id:"5.2.4", value:"Page 4" },
        { id:"5.2.5", value:"Page 5" },
        { id:"6.2.1", value:"Page 1" },
        { id:"6.2.2", value:"Page 2" },
        { id:"6.2.3", value:"Page 3" },
        { id:"6.2.4", value:"Page 4" },
        { id:"6.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" }
    ]}
  ]}
];

if (!webix.env.touch && webix.env.scrollSize)
  webix.CustomScroll.init();

webix.ui({
  height:350, width:300, type:"clean", margin:20,
  rows:[
    {template:"<strong>Custom Scroll in Tree</strong>", height:30},
    {
      view:"tree",
      data: smalltreedata
    }
  ]
});