Demo - Binding to XML Documents

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">
  <h1>
    Binding to XML Documents
  </h1>
  <p>
    This sample shows how you can use XML documents
    as a hierarchical data source for the <b>FlexGrid</b> 
    control.
  </p>
  <p>
    It uses a <b>DOMParser</b> object to parse an XML
    string into a Document object and loops through the
    Document to build an array with "category" items,
    each with a "products" array.
  </p>
  <p>
    The array is used as an <b>itemsSource</b> and the
    <b>childItemsPath</b> property is used to show the
    products for each category as a tree:
  </p>
  <div id="theGrid"></div>
</div>

CSS

.wj-flexgrid {
  height: 300px;
}
.wj-flexgrid .wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) {
  background: white;
  color: #444;
  border-bottom: none;
}

JavaScript

onload = function() {

	var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	autoGenerateColumns: false,
    columns: [
    	{ binding: 'name', header: 'Name', width: '3*' },
      { binding: 'id', header: 'ID', dataType: 'String', width: '*' },
      { binding: 'price', header: 'Unit Price', format: 'n2', dataType: 'Number', width: '*' },
		],
    headersVisibility: 'Column',
    childItemsPath: 'products',
    treeIndent: 25,
    itemsSource: getProductsByCategory()
	});

  // parse an XML document into an array
  function getProductsByCategory() {
  	var items = [],
    		parser = new DOMParser(),
        xml = getXml(),
        doc = parser.parseFromString(xml, 'application/xml');

		// get categories
    var categories = doc.querySelectorAll('category');
    for (var c = 0; c < categories.length; c++) {
    	var category = categories[c];
      items.push({
      	id: parseInt(category.getAttribute('id')),
        name: category.getAttribute('name'),
        products: []
      });

      // get products in this category
      var products = category.querySelectorAll('product');
      for (var p = 0; p < products.length; p++) {
      	var product = products[p];
        items[items.length - 1].products.push({
        	id: parseInt(product.getAttribute('id')),
          name: product.getAttribute('name'),
          price: parseFloat(product.getAttribute('price'))
        })
      }
    }

    // all done
    return items;
	}

  // get the XML string used as a data source
  function getXml() {
  	return '<categories>' +
    	'<category id="0" name="Beverages">' +
      	'<product id="1" name="Chai" price="18" />' +
        '<product id="2" name="Chang" price="19" />' +
        '<product id="24" name="Guarana Fantastica" price="4.5" />' +
        '<product id="34" name="Sasquatch Ale" price="14" />' +
			'</category>' +
      '<category id="1" name="Condiments">' +
      	'<product id="3"	name="Aniseed Syrup" price="10" />' +
        '<product id="4"	name="Chef...