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

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

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

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;
}

var tpl = "<strong>Loading from an XML data source</strong>"+"<br><br>" +
    "The sample demonstrates different ways you can load XML data to DataTree:"+"<br><br>" +
    "1. Plain XML data (based on < item > tags)<br> "+
    "2. Mixed XML data (using custom tags)<br> "+
    "3. Custom logic for parsing XML data<br>" +
    "4. Loading from a file<br>";

webix.ui({
  rows:[
    {template:tpl, height:170},
    {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>