Tree: XML Dataset, programming examples of loading from an XML data source to DataTree

Home
Examples
Tree: XML Dataset

Tree: XML Dataset

Use this JavaScript programming example for loading from an XML data source to DataTree. The code sample demonstrates four different ways you can do it: plain XML data (based on tags); mixed XML data (using custom tags); custom logic for parsing XML data; loading from a file. Don't hesitate to make use of our coding samples or a snippet tool below for speeding up your web development process.

JS Code

/*
  The sample demonstrates different ways you can load XML data to Tree:
  
  1) Plain XML data ("item" tags; 1st tree) and custom tags (2nd tree)
  2) Via custom parsing logic (3rd tree) and loading from a file (4th tree).
*/


var myxml = webix.DataDriver.myxml = webix.copy(webix.DataDriver.xml);
myxml.records = "/*/book";
myxml.child = "part";


var myxml2 = webix.DataDriver.myxml2 = webix.copy(webix.DataDriver.xml);
myxml2.records = "/*/book";
myxml2.child = function(obj){
  if (obj.$level == 1)
    return obj.part;
  if (obj.$level == 2)
    return obj.page;
}

webix.ui({
  rows:[
    {cols:[
      { // plain xml data based on <item> tags
        view:"tree",
        scheme:{ $parseChild:"item" },
        data: document.getElementById('data1').value,
        datatype:"xml"
      },
      { // mixed xml data, custom tags
        view:"tree",
        data: document.getElementById('data2').value,
        datatype:"myxml"
      }
    ]},
    {cols:[
      { // custom xml format
        view:"tree",
        data: document.getElementById('data3').value,
        datatype:"myxml2"
      },      
      { // loading from a file
        view:"tree",
        url:"//docs.webix.com/samples/17_datatree/01_loading/data/data.xml",
        datatype:"xml"}
    ]}
  ]
});

HTML Code

<textarea id='data1' style='display:none;'>
	<data>
		<item value='The Shawshank Redemption' open='1'>
			<item value='part1'></item>
			<item value='part2'></item>
		</item>
	</data>
</textarea>

<textarea id='data2' style='display:none;'>
	<response>
		<book value='The Shawshank Redemption' open='1'>
			<part value='part1'></part>
			<part value='part2'></part>
		</book>
	</response>
</textarea>

<textarea id='data3' style='display:none;'>
	<response>
		<book value='The Shawshank Redemption' open='1'>
			<part value='part1'>
				<page>Page 15</page>
				<page>Page 16</page>
			</part>
			<part value='part2'></part>
		</book>
	</response>
</textarea>

How to load XML data to DataTree?

Download Webix UI Framework

Study Tree Documentation

Check out Tree Widget Features