Ignite UI API Reference

ig.DataSource

ig.DataSource_image

The igDataSource component is a client-side component which features support for filtering, paging, sorting, summaries, and updating data. The component also provides hierarchical data binding and load-on-demand support for the igHierarchicalGrid and igTree controls. Supports is also available for binding to various types of data sources including JSON, XML, HTML tables, WCF/REST services, JSONP and JSONP and OData combined. Other classes which extend the data source base class come preconfigured with specified data types which  include: igArrayDataSource, igFunctionDataSource, igHtmlTableDataSource, igJSONDataSource, igJSONPDataSource, igRemoteDataSource, and igXmlDatasource. Further information regarding the classes, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the DataSource 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 DataSource 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">
        var ds;
        var render = function (success, error) {
            if (success) {
          var template = "<tr><td>${ProductID}</td><td>${Name}</td><td>${ProductNumber}</td></tr>",
          resultHtml = $.ig.tmpl(template, ds.dataView());
          $("#table").html(resultHtml);
            } else {
                alert(error);
            }
        };
 
        var products = [];
  
        products[0] = {
            "ProductID": 1,
            "Name": "Adjustable Race",
            "ProductNumber": "AR-5381"
        };
        products[1] = {
            "ProductID": 2,
            "Name": "Bearing Ball",
            "ProductNumber": "BA-8327"
        };
  
        $(function () {
            ds = new $.ig.DataSource({
                dataSource: products,
                callback: render
            });
  
            ds.dataBind();
        });
    </script>
</head>
<body>
    <table id="table"></table>
</body>
</html>

Related Samples

Related Topics

Dependencies

jquery-1.4.4.js
infragistics.util.js

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

#