ig.XmlDataSource

ig.XmlDataSource_image

The XmlDataSource extends the DataSource class and sets the type option to 'xml' by default. For more details on the XmlDataSource component’s API details, 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 XmlDataSource 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 XmlDataSource 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 xmlString = "<personContacts>\r\n" +
                "<person>\r\n" +
                    "<generalInfo contactID=\"1\" firstName=\"Gustavo\"\r\n  lastName=\"Achong\" emailPromotion=\"true\">\r\n    gustavo0@adventure-works.com</generalInfo>\r\n" +
                    "<modifiedDate FictionalFloat=\"0.31831\">May 16 2005\r\n 4:33</modifiedDate>\r\n" +
                "</person>\r\n" +
                "<person>\r\n" +
                    "<generalInfo contactID=\"2\" firstName=\"Catherine\"\r\n middleName=\"R.\" lastName=\"Abel\" emailPromotion=\"true\">\r\n    catherine0@adventure-works.com</generalInfo>\r\n" +
                    "<modifiedDate FictionalFloat=\"0.63662\">May 16 2005\r\n 4:33</modifiedDate>\r\n" +
                "</person>\r\n" +
                "<person>\r\n" +
                    "<generalInfo contactID=\"3\" firstName=\"Kim\"\r\n lastName=\"Abercrombie\" emailPromotion=\"false\">\r\n    kim2@adventure-works.com</generalInfo>\r\n" +
                    "<modifiedDate FictionalFloat=\"0.95493\">May 16 2005\r\n 4:33</modifiedDate>\r\n" +
                "</person>\r\n" +
            "</personContacts>";
             
            xmlSchema = new $.ig.DataSchema("xml", {
                fields: [
                { name: "FirstName", xpath: "generalInfo/@firstName" },
                { name: "LastName", xpath: "generalInfo/@lastName" },
                { name: "Email", xpath: "generalInfo"}],
                searchField: "//person"
            });
 
            ds = new $.ig.XmlDataSource({
                dataSource: xmlString,
                schema: xmlSchema
            });
 
            ds.dataBind();
 
            var template = "<tr><td>${FirstName}</td><td>${LastName}</td><td>${Email}</td></tr>",
            resultHtml = $.ig.tmpl(template, ds.dataView());
            $("#t1").html(resultHtml);
        });
    </script>
</head>
<body>
    <table id="t1" class="standard-grid">
        <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.