[Solved] autoSync throws exception

[Lior]

Hey,

I tried to implement autoSync but it throws the following exception:
:3001/js/kendo.all.min.js:11 Uncaught TypeError: Cannot read property 'call' of undefined

Here's the code of the controller that handles the grid in AngularJS.

001.define(['app'], function(app) {
002.    app.controller('MainCtrl', function ($scope, $http, $routeParams, $modal, $timeout, $q, MainService, LoginService) {
003.
004.        /* ========================================== */
005.        /*           GENERAL INITIALIZATIONS          */
006.        /* ========================================== */
007.
008.        // Set the culture
009.        kendo.culture("he-IL");
010.
011.        // Define scope variables
012.        $scope.VM = {};
013.        $scope.VM.filter = {};
014.        $scope.VM.collections = {};
015.
016.        // Define the view permissions
017.        $scope.VM.permissions = {
018.            allow_edit: true,
019.            allow_sign: true,
020.            allow_cancel: true
021.        };
022.
023.        /* ========================================== */
024.        /*        INITIALIZING THE COLLECTIONS        */
025.        /* ========================================== */
026.
027.        /* The list of all suppliers */
028.        $scope.VM.collections.suppliers = [
029.            {
030.                "value": "AAA",
031.                "text": "AAA"
032.            },
033.            {
034.                "value": "BBB",
035.                "text": "BBB"
036.            },
037.            {
038.                "value": "CCC",
039.                "text": "CCC"
040.            },
041.        ];
042.        /* The list of all expensesCause */
043.        $scope.VM.collections.expensesCause = [
044.            {
045.                "value":"DDD" ,
046.                "text":"DDD"
047.            },
048.            {
049.                "value": "EEE",
050.                "text": "EEE"
051.            },
052.            {
053.                "value": "FFF",
054.                "text": "FFF"
055.            },
056.        ];
057.        /* The list of all subExpensesCause */
058.        $scope.VM.collections.subExpensesCause = [
059.            {
060.                "value":"DDD" ,
061.                "text":"DDD"
062.            },
063.            {
064.                "value": "EEE",
065.                "text": "EEE"
066.            },
067.            {
068.                "value": "FFF",
069.                "text": "FFF"
070.            },
071.        ];
072.
073.        /* ========================================== */
074.        /*      INITIALIZING THE DEFAULT FILTER       */
075.        /* ========================================== */
076.
077.        $scope.VM.filter.from_date = moment().subtract(2, "month").toDate();
078.        $scope.VM.filter.to_date = moment().toDate();
079.
080.        /* ========================================== */
081.        /*            INITIALIZING THE GRID           */
082.        /* ========================================== */
083.
084.        /* Holds the list of all selected rows */
085.        $scope.VM.gridSelectedRows = [];
086.
087.        /* The grid definition */
088.        $scope.VM.gridOptions = {
089.            height: 640,
090.            filterable: {
091.                mode: "row"
092.            },
093.            scrollable: true,
094.            sortable: true,
095.            selectable: "multiple, row",
096.            editable: true,
097.            resizable: true,
098.            reorderable: true,
099.            //groupable: true,
100.            toolbar: [
101.                { name: "excel", text: " ייצוא לאקסל" },
102.                //{ name: "save", text: "שמור"}
103.            ],
104.            excel: {
105.                fileName: "results.xlsx"
106.            },
107.            columns: [
108.                {
109.                    field: "date_created",
110.                    title: "תאריך",
111.                    template: "<div ng-bind='dataItem.date_created | date: \"dd/MM/yyyy\"' title='{{ dataItem.date_created | date: \"dd/MM/yyyy\" }}'></div>",
112.                    filterable: false
113.                },
114.                {
115.                    field: "project_name",
116.                    title: "פרויקט",
117.                    template: "<div ng-bind='dataItem.project_name' title='{{ dataItem.project_name }}'></div>",
118.                    filterable: {
119.                        cell: {
120.                            operator: "contains"
121.                        }
122.                    }
123.                },
124.                {
125.                    field: "supplier_name",
126.                    title: "מוטב",
127.                    template: "<div ng-bind='dataItem.supplier_name' title='{{ dataItem.supplier_name }}'></div>",
128.                    filterable: {
129.                        cell: {
130.                            operator: "contains"
131.                        }
132.                    },
133.                    editor: function(container, options) {
134.                        container.append(
135.                            "<select kendo-combo-box "+
136.                                "k-data-text-field=\"'text'\" "+
137.                                "k-data-value-field=\"'value'\" "+
138.                                "k-filter='contains' "+
139.                                "k-auto-bind='false' "+
140.                                "k-data-source='VM.collections.suppliers' "+
141.                                "data-bind='value:"+options.field+"'>"+
142.                            "</select>");
143.                    }
144.                },
145.                {
146.                    field: "info",
147.                    title: "פרטים" ,
148.                    template: "<div ng-bind='dataItem.info' title='{{ dataItem.info }}'></div>",
149.                    filterable: {
150.                        cell: {
151.                            operator: "contains"
152.                        }
153.                    },
154.                    width: "250px"
155.                },
156.                {
157.                    field: "expense_cause",
158.                    title: "סעיף הוצאה",
159.                    template: "<div ng-bind='dataItem.expense_cause' title='{{ dataItem.expense_cause }}'></div>",
160.                    filterable: {
161.                        cell: {
162.                            operator: "contains"
163.                        }
164.                    },
165.                    editor: function(container, options) {
166.                        container.append(
167.                            "<select kendo-combo-box "+
168.                                "k-data-text-field=\"'text'\" "+
169.                                "k-data-value-field=\"'value'\" "+
170.                                "k-filter='contains' "+
171.                                "k-auto-bind='false' "+
172.                                "k-data-source='VM.collections.expensesCause' "+
173.                                "data-bind='value:"+options.field+"'>"+
174.                            "</select>");
175.                    }
176.                },
177.                {
178.                    field: "sub_expense_cause",
179.                    title: "תת סעיף הוצאה",
180.                    template: "<div ng-bind='dataItem.sub_expense_cause' title='{{ dataItem.sub_expense_cause }}'></div>",
181.                    filterable: {
182.                        cell: {
183.                            operator: "contains"
184.                        }
185.                    },
186.                    editor: function(container, options) {
187.                        container.append(
188.                            "<select kendo-combo-box "+
189.                            "k-data-text-field=\"'text'\" "+
190.                            "k-data-value-field=\"'value'\" "+
191.                            "k-filter='contains' "+
192.                            "k-auto-bind='false' "+
193.                            "k-data-source='VM.collections.subExpensesCause' "+
194.                            "data-bind='value:"+options.field+"'>"+
195.                            "</select>");
196.                    }
197.                },
198.                {
199.                    field: "cheque_number",
200.                    title: "מספר צ'ק",
201.                    template: "<div ng-bind='dataItem.cheque_number' title='{{ dataItem.cheque_number }}'></div>",
202.                    filterable: {
203.                        cell: {
204.                            operator: "startswith"
205.                        }
206.                    }
207.                },
208.                {
209.                    field: "amount",
210.                    title: "סכום" ,
211.                    template: "<div ng-bind='dataItem.amount | currency: \"₪\"' title='{{ dataItem.amount | currency: \"₪\" }}'></div>",
212.                    format: "{0:c0}",
213.                    width: "180px"
214.                },
215.                {
216.                    field: "sig1",
217.                    title: "חתימה 1",
218.                    // TODO: need to convert date from string to actual date
219.                    template: "<div ng-bind='dataItem.sig1_user' title='{{ dataItem.sig1_signAt | date: \"dd/MM/yyyy hh:mm:ss\" }}'></div>",
220.                    filterable: false
221.                },
222.                {
223.                    field: "sig2",
224.                    title: "חתימה 2",
225.                    // TODO: need to convert date from string to actual date
226.                    template: function(dataItem) {
227.                        var template;
228.
229.                        template += "<div ng-bind='dataItem.sig2_user' title='{{ dataItem.sig2_signAt | date: \"dd/MM/yyyy hh:mm:ss\" }}'>";
230.                        template += "</div>";
231.                    },
232.                    filterable: false
233.                },
234.                {
235.                    field: "cheque_status",
236.                    title: "סטאטוס",
237.                    template: "<div ng-bind='dataItem.cheque_status' title='#: cheque_status #'>#: cheque_status #</div>",
238.                    template: function(dataItem) {
239.                        var result = "";
240.                        var status = $scope.translationAPI.translateStatus(dataItem.cheque_status);
241.                        var css_class = dataItem.cheque_status
242.
243.                        result += "<div title='"+status+"' class='"+css_class+"'>";
244.                        result += status;
245.                        result += "</div>";
246.
247.                        return result;
248.                    },
249.                    filterable: {
250.                        cell: {
251.                            operator: "eq"
252.                        }
253.                    }
254.                }
255.            ],
256.            dataSource: {
257.                schema: {
258.                    model: {
259.                        fields: {
260.                            date_created: {
261.                                editable: false,
262.                                type: "date"
263.                            },
264.                            project_name: {
265.                                editable: false
266.                            },
267.                            supplier_name: {
268.                                editable: true,
269.                                validation: {
270.                                    required: true
271.                                }
272.                            },
273.                            info: {
274.                                editable: true
275.                            },
276.                            expense_cause: {
277.                                editable: true,
278.                                nullable: true
279.                            },
280.                            sub_expense_cause: {
281.                                editable: true,
282.                                nullable: true
283.                            },
284.                            cheque_number: {
285.                                editable: false
286.                            },
287.                            amount: {
288.                                editable: false
289.                            },
290.                            sig1: {
291.                                editable: false
292.                            },
293.                            sig2: {
294.                                editable: false
295.                            },
296.                            cheque_status: {
297.                                editable: false
298.                            }
299.                        }
300.                    },
301.                    data: "data"
302.                },
303.                //serverPaging: true,
304.                //serverSorting: true,
305.                //pageSize: 100,
306.                autoSync: true,
307.                transport: {
308.                    read: function(e) {
309.                        // Save the 'e' for future reference
310.                        $scope.VM.readOptions = e;
311.
312.                        // Start the spinner
313.                        kendo.ui.progress($("div[kendo-grid]"), true);
314.
315.                        var from_date = $scope.VM.filter.from_date;
316.                        var to_date = $scope.VM.filter.to_date;
317.                        MainService.getCheques(from_date, to_date).then(function(data) {
318.                            e.success(data);
319.
320.                            // Stop the spinner
321.                            kendo.ui.progress($("div[kendo-grid]"), false);
322.                        });
323.                    },
324.                    update: function(e) {
325.                        // Save the 'e' for future reference
326.                        $scope.VM.updateOptions = e;
327.
328.                        MainService.updateCheque(e.model).then(function(data) {
329.                            e.success(data);
330.                        });
331.                    }
332.                }
333.            }
334.        };
335.
336.        /* ========================================== */
337.        /*                  Methods                   */
338.        /* ========================================== */
339.
340.        // Check if at-least one row selected
341.        $scope.VM.isEntitySelected = function() {
342.            return $scope.VM.gridSelectedRows.length > 0;
343.        };
344.        // Check if the user is allowed to sign
345.        $scope.VM.isAllowSign = function() {
346.            return $scope.VM.permissions.allow_sign;
347.        };
348.        // Check if the user is allowed to unsign
349.        $scope.VM.isAllowUnSign = function() {
350.            return $scope.VM.permissions.allow_sign;
351.        };
352.        // Check if the user is allowed to edit existing items
353.        $scope.VM.isAllowEdit = function() {
354.            return $scope.VM.permissions.allow_edit;
355.        };
356.        // Check if the user is allowed to add new items
357.        $scope.VM.isAllowAdd = function() {
358.            return $scope.VM.permissions.allow_edit;
359.        };
360.        // Check if the user is allowed to cancel cheques
361.        $scope.VM.isAllowCancel = function() {
362.            return $scope.VM.permissions.allow_cancel;
363.        };
364.
365.        /* Responsible for filtering the grid by the status field  */
366.        $scope.VM.changeStatus = function(e, status) {
367.            // TODO: need to implement
368.        };
369.
370.        /* Get all cheques from within the dates range */
371.        $scope.VM.getCheques = function(e) {
372.            $scope.VM.gridOptions.dataSource.transport.read($scope.VM.readOptions);
373.        };
374.
375.        $scope.VM.getRowsCount = function() {
376.
377.        };
378.
379.        $scope.VM.getAmountSum = function() {
380.
381.        };
382.
383.        $scope.VM.getSelectedRowsCount = function() {
384.
385.        };
386.
387.    });
388.
389.});

Please advise.

[Rosen]

Hi Lior,

By looking at the code snippets you have pasted, I suspect that the error is caused by transport missing the create method. The create method is called due to the fact that there is no id field declared in the schema model declaration, thus all items are treated as new instead of existing and pushed through the create not through the update transport method. Therefore, setting the schema.model.id should address the error you have described.

Regards,
Rosen
Telerik