4 Steps to Binding XML Data to the Ignite UI Grid

Craig Shoemaker / Tuesday, October 23, 2012

The Ignite UI Grid is a flexible jQuery and HTML-based grid control that can be bound to many different types of data sources - and XML data is no exception.

1. Get the Data

To begin, you first need to get data on your page. In this case your page needs to have XML either locally available on the page or as the result of an AJAX call.

For simplicity’s sake the code example that accompanies this post has XML data local to the page.

var xmlDoc = '<People>' +
    '<Person Name="Gustavo Achong">' +
        '<Details Age="42" Email="gachong@adventureworks.com" />' +
    '</Person>' +
    '<Person Name="Catherine Abel">' +
        '<Details Age="27" Email="cabel@adventureworks.com" />' +
    '</Person>' +
    '<Person Name="Kim Abercrombie">' +
        '<Details Age="33" Email="kabercrombie@adventureworks.com" />' +
    '</Person>' +
'</People>';

2. Create the Schema

Once you have data available, then you need to create a schema. Since XML is a very flexible data structure schemas are necessary to provide a way for the data source component to know how to interpret the incoming XML.

The searchField option is configured to point to //Person which points to the root of the XML element which represents a record in the grid.

Each of the columns in the grid is mapped to fields in the XML schema. In this case, the root Person element has only one child element with a few attributes that are extracted using XPath syntax to create the appropriate schema.

var xmlSchema = new $.ig.DataSchema("xml", { 
    //searchField serves as the base node(s) for the XPaths
    searchField: "//Person", 
    fields: [
        { name: "Name", xpath: "./@Name" },
        { name: "Email", xpath: "Details/@Email" },
        { name: "Age", xpath: "Details/@Age" }
    ]
});

3. Create the Data Source

Now that the raw XML data is being shaped by the schema, the two are paired together using the data source control.

var ds = new $.ig.DataSource({
    type: "xml",
    dataSource: xmlDoc,
    schema: xmlSchema 
});

4. Bind to the Grid

Finally the grid is instantiated with the dataSource option set to the instance of the data source.

$("#grid").igGrid({
    dataSource: ds
});

Full Source Code

To see it all working together, the following is the full source code.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="../js/modernizr.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script src="http://localhost/ig_ui/js/infragistics.loader.js"></script>
</head>
<body>

    <table id="grid"></table>

    <script>
        // The ig.loader is used to load required IgniteUI JavaScript 
        // and CSS resources. It accepts a configuration object that specifies
        // default paths and the components to load into the page.
        $.ig.loader({
            scriptPath: 'http://localhost/ig_ui/js/',
            cssPath: 'http://localhost/ig_ui/css/',

            //string representing which component resources are required
            resources: "igDataSource,igGrid"
        });

        //The ig.loader accepts a function that is called after 
        //all resources are loaded and document.ready has fired.
        $.ig.loader(function () {
                        
            //Sample XML Data
            var xmlDoc = '<People>' +
                '<Person Name="Gustavo Achong">' +
                    '<Details Age="42" Email="gachong@adventureworks.com" />' +
                '</Person>' +
                '<Person Name="Catherine Abel">' +
                    '<Details Age="27" Email="cabel@adventureworks.com" />' +
                '</Person>' +
                '<Person Name="Kim Abercrombie">' +
                    '<Details Age="33" Email="kabercrombie@adventureworks.com" />' +
                '</Person>' +
            '</People>';

            //Binding to XML requires a schema to define data fields
            var xmlSchema = new $.ig.DataSchema("xml", { 
                //searchField serves as the base node(s) for the XPaths
                searchField: "//Person", 
                fields: [
                    { name: "Name", xpath: "./@Name" },
                    { name: "Email", xpath: "Details/@Email" },
                    { name: "Age", xpath: "Details/@Age" }
                ]
            });

            //This creates an Infragistics datasource from the XML 
            //and the Schema which can be consumed by the grid.
            var ds = new $.ig.DataSource({
                type: "xml",
                dataSource: xmlDoc,
                schema: xmlSchema 
            });

            $("#grid").igGrid({
                dataSource: ds //$.ig.DataSource defined above
            });

        });

    </script>

</body>
</html>