New to Kendo UI for jQuery? Download free 30-day trial

Bind to Kinvey Backend Services

Environment

Product Progress® Kendo UI® Grid for jQuery
Operating System All
Browser All
Browser Version All
Preferred Framework AngularJS

Description

How can I use AngularJS directives to bind the Kendo UI Grid for jQuery to Telerik Backend Services?

Solution

The following example demonstrates how to bind the Grid to the Kinvey Backend Services in an AngularJS application.

<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl" data-ng-init="init()">
        <!-- Use grid directive with scope options -->
        <kendo-grid options="gridOptions"></kendo-grid>
    </div>
</div>

<!-- Kinvey JS SDK (HTML, PhoneGap, etc.) -->
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/kinvey-html5-sdk.min.js"></script>

<!-- Kinvey Kendo UI Data Source -->
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/kendo.data.kinvey.min.js"></script>
<script>
    // configure API key
    Kinvey.init({
        appKey: 'kid_SJyRpx96G',
        appSecret: 'a88466f87e434ca4a1a0194e33d3168d'
    });

    angular.module("KendoDemos", ["kendo.directives"])
        .controller('MyCtrl', ["$scope", MyCtrl]);

    function MyCtrl($scope) {
        $scope.init = function() {
            if (!Kinvey.User.getActiveUser()) {
                var that = this;
                Kinvey.User.signup()
                    .then(function() {
                        that.dataSource.read();
                    })
                    .catch(function(error) {
                        alert(error.message);
                    });
            } else {
                this.dataSource.read();
            }
        };

        // declare dataSource bound to backend
        $scope.dataSource = new kendo.data.DataSource({
            type: "kinvey",
            transport: {
                typeName: "products"
            },
            schema: {
                model: {
                    id: "_id",
                    fields: {
                        UnitPrice: {
                            type: "number"
                        },
                        UnitsInStock: {
                            type: "number"
                        },
                        Discontinued: {
                            type: "boolean"
                        }
                    }
                }
            },
            pageSize: 20,
            serverSorting: true,
            serverPaging: true,
            error: function(err) {
                alert(JSON.stringify(err));
            }
        });

        $scope.gridOptions = {
            autoBind: false,
            dataSource: $scope.dataSource,
            height: 430,
            sortable: true,
            pageable: true,
            columns: [{
                field: "ProductName",
                title: "Product Name"
            }, {
                field: "UnitPrice",
                title: "Unit Price",
                width: 220
            }, {
                field: "UnitsInStock",
                title: "Units In Stock",
                width: 220
            }, {
                field: "Discontinued",
                title: "Discontinued",
                width: 220
            }]
        };
    }
</script>

See Also

In this article