Grid Data with Angular’s Kendo Directives

---

One of the biggest problems we’ve run into is accessing and updating grid data using data from our Angular DataFactories. Here’s how we have had the most success:

Here is a simple labor grid.

That’s pretty damn easy, isn’t it?

Now, to populate it is actually a bit tricky. The way to do it is to use the exact same kendo UI format in building the options and send them to the grid as a function of the scope. (which is pretty standard). The trick is the data needs to be in the READ of the transport object.

read: function (options) {
                        datalayer.PackageLaborItems(package_id).
                            then(function (results) {
                                options.success(results.data)
                            })

that datalayer is our factory object, byt you could just as easily use $http. The trick is to set the options.success to the dataset you get in return.

so, rather than setting the data of the grid to an actual dataset, that read has to be a function call that returns a dataset.

    $scope.getLaborGridOptions = function () {
        return {
            dataSource: {
                type: 'json',
                transport: {
                    read: function (options) {
                        datalayer.PackageLaborItems(package_id).
                            then(function (results) {
                                options.success(results.data)
                            })
                    },
                },
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { editable: false }
                            , Employee: { type: "string", editable: true }
                            , Task: { type: "string", editable: true }
                            , Quantity: { type: "number", editable: true }
                            , Hours: { type: "number", editable: true }
                            , Rate: { type: "number", editable: true }
                        }
                    }
                }
            },
            ,
            columns: [
                { hidden: true, field: "id", title: "id" },
                {field: "Employee", title: "Staff" },
                {field: "Task", title: "Task"},
                {field: "Quantity", title: "Quantity" },
                {field: "Hours",title: "Hours"  },
                { field: "Rate",title: "Rate" } 
            ]

        }
    }

Here are the factories we have for this module, so you can see how it works:

var app = angular.module('myapp', ['kendo.directives', 'ngMessages'])
.factory('datalayer', function ($q, $timeout, $http) {
    return {
        SaveRecord: function (Package) {
            var url = '/api/Package.ashx?package_id=' + package_id + '&sid=' + session_id
            return $http.post(url, Package);
        },
        CommissionTypes: function () {
            return $http.get('/api/CommisionTypes.ashx?sid=' + session_id);
        },
        GetPackage: function (package_id) {
            return $http.get('/api/Package.ashx?package_id=' + package_id + '&sid=' + session_id);
        },
        PackageItems: function (package_id) {
            return $http.get('/api/PackageItems.ashx?package_id=' + package_id + '&sid=' + session_id);
        },
        PackageLaborItems: function (package_id) {
            return $http.get('/api/PackageLaborItems.ashx?package_id=' + package_id + '&sid=' + session_id);
        },
        LaborItemsAdd: function (dataset) {
            return $http.post('/api/JobLaborHandler.ashx?sid=' + session_id, dataset)
        }
        ,
        JobRooms: function (orderid) {
            return $http.get('/api/JobRoomHandler.ashx?oid='+orderid+'&sid=' + session_id)
        }

    };
});

This guy had the original idea: http://www.markschabacker.com/blog/2015/07/31/angular-service-as-kendo-datasource/