ig.MashupDataSource

ig.MashupDataSource_image

The MashupDataSource is used to create a single collection of data from multiple sources. The sources are combined using a common primary key field. This class is an extension of the DataSource class which adds the options for mashupSettings. For more details on the MashupDataSource component’s API, refer to the base DataSource component’s API documentation. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the MashupDataSource control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the MashupDataSource control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
 
    <script type="text/javascript">
    $(function () {
        var jsArray = new Array(), xmlDoc, xmlSchema, mashupSources, dsMashup;
 
        jsArray[0] = { "ID": 0, "Name": "Bread", "Description": "Whole grain bread" };
        jsArray[1] = { "ID": 1, "Name": "Milk", "Description": "Low fat milk" };
        jsArray[2] = { "ID": 2, "Name": "Vint soda", "Description": "Americana Variety - Mix of 6 flavors" };
        jsArray[3] = { "ID": 3, "Name": "Havina Cola", "Description": "The Original Key Lime Cola"};
        jsArray[4] = { "ID": 4, "Name": "Fruit Punch", "Description": "Mango flavor, 8.3 Ounce Cans (Pack of 24)"};
        jsArray[5] = { "ID": 5, "Name": "Cranberry Juice", "Description": "16-Ounce Plastic Bottles (Pack of 12)"};
        jsArray[6] = { "ID": 6, "Name": "Pink Lemonade", "Description": "36 Ounce Cans (Pack of 3)" };
        jsArray[7] = { "ID": 7, "Name": "DVD Player", "Description": "1080P Upconversion DVD Player" };
        jsArray[8] = { "ID": 8, "Name": "LCD HDTV", "Description": "42 inch 1080p LCD with Built-in Blu-ray Disc Player" };
 
        xmlDoc = "<feed>\r\n" +
                    "<entry>\r\n" +
                        "<id>0</id>\r\n    <title>Bread</title>\r\n    <summary>Whole grain bread</summary>\r\n    <content id=\"0\" rating=\"4\" price=\"2.5\"></content>\r\n </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>1</id>\r\n    <title>Milk</title>\r\n    <summary>Low fat milk</summary>\r\n    <content id=\"1\" rating=\"3\" price=\"3.5\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>2</id>\r\n    <title>Vint soda</title>\r\n    <summary>Americana Variety - Mix of 6 flavors</summary>\r\n    <content id=\"2\" rating=\"3\" price=\"20.9\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>3</id>\r\n    <title>Havina Cola</title>\r\n    <summary>The Original Key Lime Cola</summary>\r\n    <content id=\"3\" rating=\"3\" price=\"19.9\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>4</id>\r\n    <title>Fruit Punch</title>\r\n    <summary>Mango flavor, 8.3 Ounce Cans (Pack of 24)</summary>\r\n    <content id=\"4\" rating=\"3\" price=\"22.99\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>5</id>\r\n    <title>Cranberry Juice</title>\r\n    <summary>16-Ounce Plastic Bottles (Pack of 12)</summary>\r\n    <content id=\"5\" rating=\"3\" price=\"22.8\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>6</id>\r\n    <title>Pink Lemonade</title>\r\n    <summary>36 Ounce Cans (Pack of 3)</summary>\r\n    <content id=\"6\" rating=\"3\" price=\"18.8\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>7</id>\r\n    <title>DVD Player</title>\r\n    <summary>1080P Upconversion DVD Player</summary>\r\n    <content id=\"7\" rating=\"3\" price=\"35.88\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>8</id>\r\n    <title>LCD HDTV</title>\r\n    <summary>42 inch 1080p LCD with Built-in Blu-ray Disc Player</summary>\r\n    <content id=\"8\" rating=\"3\" price=\"1088.8\"></content>\r\n  </entry>\r\n" +
                "</feed>";           
         
        xmlSchema = new $.ig.DataSchema("xml", {
            fields: [
                { name : "ID", xpath: "id" },
                { name : "Rating", xpath: "content/@rating" },
                { name : "Price", xpath : "content/@price" }
            ],
            searchField: "//entry"
        });
             
        mashupSources = [
            { dataSource: jsArray, primaryKey: "ID" },
            { dataSource: xmlDoc, type: "xml", primaryKey: "ID" ,schema: xmlSchema }
        ];
             
        dsMashup = new $.ig.MashupDataSource({ dataSource: mashupSources });
        dsMashup.dataBind();
   
      var template = "<tr><td>${ID}</td><td>${Name}</td><td>${Description}</td><td>${Rating}</td><td>${Price}</td></tr>",
      resultHtml = $.ig.tmpl(template, dsMashup.dataView());
      $("#mashupDataSource").html(resultHtml);
    });
    </script>
</head>
<body>
    <table id="mashupDataSource">
        <thead></thead>
        <tbody></tbody>
    </table>
</body>
</html>

Related Samples

Related Topics

Dependencies

jquery.js
infragistics.util.js
infragistics.util.jquery.js

Copyright © 1996 - 2025 Infragistics, Inc. All rights reserved.