Error "Cannot read property 'call' of undefined" when update/destroy in inline edition mode

3 posts, 1 answers
  1. Alexandre
    Alexandre avatar
    2 posts
    Member since:
    Oct 2014

    Posted 09 May 2016 Link to this post

    We actually test Kendo UI with angular.

    We have an error when we want to update or destroy line in the grid (inline edition mode).

    it's certainly an error in the "transport" code block, but i don't find it.

    the error is "Cannot read property 'call' of undefined"

    the hml part is simplistic :

     

    <div kendo-grid k-options="mainGridOptions2" style="height: 600px; width: 900px">

     

    this is our Controller code :

     

    'use strict';
     
    /**
     * @ngdoc function
     * @name kendoTestApp.controller:PersonsPersonslistCtrl
     * @description
     * # PersonsPersonslistCtrl
     * Controller of the kendoTestApp
     */
    angular.module('kendoTestApp')
      .controller('PersonsPersonslistCtrl', function ($resource, $scope, $rootScope) {
     
          $scope.mainGridOptions2 = {
              editable:"inline",
              dataSource: {
     
                  transport: {
                      read:
                      function(e){
                              
     
                          var testData = [
                              {
                                  "FirstName": "Ken",
                                  "Id": 1,
                                  "LastName": "Ruffort",
                                  "ModifiedDateString": "2016-03-15T11:44:33.1370000",
                                  "Title": null,
                                  "TypeString": "SC"
                              },
                              {
                                  "FirstName": "Gigi",
                                  "Id": 2,
                                  "LastName": "Lopez",
                                  "ModifiedDateString": "2002-02-23T00:00:00.0000000",
                                  "Title": null,
                                  "TypeString": "VC"
                              },
                              {
                                  "FirstName": "Robert1",
                                  "Id": 3,
                                  "LastName": "Tamburello",
                                  "ModifiedDateString": "2015-07-18T00:00:00.0000000",
                                  "Title": null,
                                  "TypeString": "EM"
                              }];
     
                          e.success(testData);
     
     
     
                          },
                      update:
                          function(e){
                              console.log("update");
                          },
                      destroy: function (e) {
                          console.log("destroy");
     
                      },
                      parameterMap: function(options, operation) {
                          if (operation !== "read" && options.models) {
                              console.log("parameterMap");
     
                              return {models: kendo.stringify(options.models)};
     
                          }
                      }
                  },
                  schema: {
                      model: {
                          fields: {
                              FirstName: {type: "string"},
                              Id: {type: "number"},
                              LastName: {type: "string"},
                              ModifiedDateString: {type: "date"},
                              Title: {type: "string"},
                              TypeString: {type: "string"}
                          }
                      }, parse: function (data) {
                          $.each(data, function (i, val) {
                              val.ModifiedDateString = new Date(val.ModifiedDateString);
                              val.ModifiedDateString.setHours(0, 0, 0, 0);
                             // console.log(val.ModifiedDateString);
     
                          });
                          return data;
                      }
                  },
                  pageSize: 20,
                  batch:false,
                  serverPaging: false,
                  serverFiltering: false,
                  serverSorting: false
              },
              columns: [
                  {
                      field:'Id',
                      title: 'Id',
                      width:'70px'
     
                  },
                  {
                      field:'FirstName',
                      title: 'firstname' ,
                      width:'120px',
                      template:'{{dataItem.Title}} {{dataItem.FirstName}}' ,
                      type:'string',
                      filterable:{
                          cell:{operator:"contains"}
                      }
                  },
                  {field:'TypeString',title: 'Type' , width:'120px' , type:'string',filterable:{multi:true}},
     
                  {field:'LastName',title: 'LastName' , width:'120px' , type:'string'},
                  {
                      field:'ModifiedDateString',
                      title: 'ModifiedDateString' ,
                      width:'120px',
                      format: "{0:MMM dd, yyyy}",
                      parseFormats: "{0:MM/dd/yyyy}",
                      headerTemplate: '<label for="check-all"><b>Start Date</b></label>',
                      headerAttributes: { style: "text-align: center;" },
                      attributes: { style: "text-align:center !important;padding-right: 25px;" },
                      filterable: {
                          ui: function (element) {
                              element.kendoDatePicker({
                                  format: "MMM dd, yyyy"
                              });
                          }
                      }
                  },
                  {command:[{name:"edit",text:""},{name:"destroy",text:""}],title:" ", width:"200px"}],
     
              sortable: true,
              pageable:{
     
                  pageSizes:[10,20,100,500],
                  buttonCount:5
     
     
              },
              scrollable:true,
              toolbar:["create"],
              filterable:true
          };
     
     
     
     
     
     
      });

  2. Answer
    Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 11 May 2016 Link to this post

    Hello Alexandre,

    You should define the model id field:
    schema: {
      model: {
        id: "Id",
        ...
    Otherwise all records will be considered as new and the create operation will be called which does not seem to be defined in the code that you provided. 
    Also, note that you should call the success callback for the update and destroy operations to signify that the operation has successfully completed:
    update: function(e){    
        console.log("update");
        e.success();
    },
    destroy: function (e) {
        console.log("destroy");
        e.success();
    },


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Alexandre
    Alexandre avatar
    2 posts
    Member since:
    Oct 2014

    Posted 13 May 2016 in reply to Daniel Link to this post

    Thank you Daniel, that solve the problem.
Back to Top