Available in the OSS Version

Data Source - Mashup Binding

When using the igMashupDataSource you can define and combine different sources into one source. This sample demonstrates how to combine data in JavaScript Array and XML into one Mashup data source.
Name (from XML) Age (from Array)
Gustavo Achong45
Catherine Abel32
Kim Abercrombie27

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .standard-grid { width:100%; border-top:1px solid #b1b1b1; border-right:1px solid #b1b1b1; border-spacing: 0;}
        .standard-grid th, .standard-grid td { text-align:left; border-bottom:1px solid #b1b1b1; border-left:1px solid #b1b1b1; padding:4px;}
    </style>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>

    <table id="table" class="standard-grid">
        <thead>
            <tr>
                <th>
                    Name (from XML)
                </th>
                <th>
                    Age (from Array)
                </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <br />

    <script>

        $(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>';

            // Sample array data
            var data = [
                { "Name": "John Smith", "Age": 45 },
                { "Name": "Mary Johnson", "Age": 32 },
                { "Name": "Bob Ferguson", "Age": 27 }
            ];

            // Renders the table
            var renderTable = function (success, error) {
                var template = "<tr><td>${PersonName}</td><td>${Age}</td></tr>";
                if (success) {
                    $("#table tbody").empty();
                    $($.ig.tmpl(template, dsMashup.dataView())).appendTo("#table tbody");
                } else {
                    alert(error);
                }
            }

            //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: "PersonName", xpath: "./@Name" },
                        { name: "PersonEmail", xpath: "Details/@Email" },
                        { name: "PersonAge", xpath: "Details/@Age" }
                    ]
                }
            );

            //This code creates an $.ig.MashupDataSource from JavaScript array and XML data
            var dsMashup = new $.ig.MashupDataSource({
                dataSource: [
                    { dataSource: data },
                    { dataSource: xmlDoc, type: "xml", schema: xmlSchema }
                ],
                callback: renderTable
            });

            dsMashup.dataBind();

        });

    </script>

</body>
</html>