TreeGrid Bound to XML

You can use XML documents as a hierarchical data source for the FlexGrid control.

Use a DOMParser object to parse an XML string into a Document object and loop through the Document to build an array with "category" items, each with a "products" array.

// 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 Anton\'s Cajun Seasoning" price="22" />' +
                '<product id="5"    name="Chef Anton\'s Gumbo Mix" price="21.35" />' +
                '<product id="6"    name="Grandma\'s Boysenberry Spread" price="25" />' +
                '<product id="8"    name="Northwoods Cranberry Sauce" price="40" />' +
                '<product id="15" name="    Genen Shouyu" price="15.5" />' +
            '</category>'
      '</categories>';
    }

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

The array is used as an itemsSource and the childItemsPath property is used to show the products for each category as a tree:

import * as wjGrid from '@grapecity/wijmo.grid';

var theGrid = new wjGrid.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()
});