Loading Data into Tree

Webix Tree can get data in the following predefined data formats:

  1. JSON (default);
  2. XML.

Details and examples of data formats in tree-like structures

There are two main ways you can specify the data source for Tree:

  1. Define the data set in the object initialization;
  2. Use one of the parse or load methods.

Both methods lead to the same result.

If you load XML data you need to set the datatype property in the constructor config or the second parameter of the parse / load method to the name of the expected data type, i.e. 'xml'.

Loading from inline dataset

If you want to specify the data set directly on the page, you can use:

  1. property data
  2. method parse

Specifying data inline

treedata = [
  { id: "1", value: "Book 1", data: [
    { id: "1.1", value: "Part 1" },
    { id: "1.2", value: "Part 2" }
  ]},
  { id: "2", value: "Book 2", data: [
    { id: "2.1", value: "Part 1" }
  ]}
];
 
tree = new webix.ui({
  view: "tree",
  ...
  data: treedata
});
 
//or 
tree.parse(treedata)

Related sample:  Tree: JSON Dataset

Loading from a data file

To load data from a file on the server, you can use:

  1. property url
  2. method load

Remember, in case of XML data you should specify the data type explicitly as 'xml':

tree = new webix.ui({
  view: "tree",
  ...
  url: "data/data.xml",
  datatype: "xml"
});
//or
tree.load('data/data.xml', 'xml');

Related sample:  Tree: JSON Dataset

Loading linear (list-like) data

It's possible to load plain (list-like) data into the tree. The tree structure is achieved by means of grouping. Grouping is specified through the $group key of the scheme parameter.

tree = new webix.ui({
  view: "tree",
  scheme: {
    $group: "#make#",
  },
  data: [
    { id: 1, value: "Avalon", make: "Toyota" },
    { id: 2, value: "Corolla", make: "Toyota" },
    { id: 3, value: "Camry", make: "Toyota" },
    { id: 4, value: "Octavia", make: "Skoda" },
    { id: 5, value: "Superb", make: "Skoda" }
  ]
});

Related sample:  Tree: Plain JSON Data with Client-side Grouping

Loading from a database

To load data from a database on the server you should deal with both client and server sides.

On the client side

You should either define a url property or call the load method that would point to a server REST API endpoint.

Static loading from a server database. Client-side code.

tree = new webix.ui({
  ...
  url: "data/tree_data.php"
}); 
//or
tree.load("data/tree_data.php");

On the server side

  • you can write the server logic by yourself;
  • or you can use dhtmlxConnector

If using dhtmlxConnector, the related server-side script will look like this:

Static loading from a MySQL database on the server. Server-side code.

require_once("../connector-php/codebase/data_connector.php");  // includes the connector file
$conn = mysql_connect('localhost', "root","");  // creates a connection
mysql_select_db("sampleDB");  // selects a database
 
$data = new TreeDataConnector($conn, "MySQL");  //initializes the connector object
// loads data from the specified database table
$data->render_table("packages_tree","id","value, state","","parent_id");

Related sample:  Dynamic Loading

Back to top