ig.RESTDataSource

ig.RESTDataSource_image

The RESTDataSource component inherits from the base DataSource and extends it to provide REST support. The RESTDataSource component collects the data using HTTP verbs. When the saveChanges method is called, the RESTDataSource component serializes the request and sends it as a whole (if batch is set to true) or in individual entity chunks (if batch is set to false) grouped by verb type. JSON serialization is the default format for requests. Support for other formats can be accomplished by implementing the contentSerializer function.

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 $.ig.RESTDataSource component.

For details on how to reference the required scripts and themes for the igGrid 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 products = [];
         
        products[0] = {
            "ProductID": 1,
            "Name": "Adjustable Race",
            "ProductNumber": "AR-5381"
        };
        products[1] = {
            "ProductID": 2,
            "Name": "Bearing Ball",
            "ProductNumber": "BA-8327"
        };
         
        $(function () {
            var ds = new $.ig.RESTDataSource({
                dataSource: products,
                primaryKey: "ProductID",
                restSettings: {
                    create: {
                        url: "/api/customers/",
                        batch: true
                    },
                    update: {
                        url: "/api/customers/",
                        batch: true
                    },
                    remove: {
                        url: "/api/customers/",
                        batch: true
                    }
                }
            });
             
            ds.dataBind();
            // POST
            ds.addRow(3, {"ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349"}, true);
            // DELETE
            ds.deleteRow(1, true);
            // PUT
            ds.updateRow(2, {"Name": "Ball Bearing", "ProductNumber": "BE-8329"}, true);
             
            ds.saveChanges();
        });
    </script>
</head>
<body>
    <table id="table"></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.