javascript - Kendo Grid - 自定义编辑器、更新不触发、行删除

Question

我有一个网格，其中包含本地加载的数据源(不使用传输)。我能够创建一个自定义编辑器，当用户单击“编辑”按钮时，它会向行添加复选框。无法使用默认编辑器，因为我必须对每个字段进行检查以查看用户是否有权更改字段。

单击“编辑”按钮会执行我所期望的操作，它会在应该的位置显示复选框。但是，更改数据并单击“更新”按钮后，该行将被删除。或者，当处于“编辑”模式并且用户单击不同行中的另一个“编辑”按钮时，原始行将被删除或控制台有关空数据的错误。

更新事件似乎也永远不会触发，因此我可以手动处理更新数据源。

dataSource = new kendo.data.DataSource({
  data: result,                         
  change: function(e){
  console.log('a change happened');
  console.log(e);                               
  },
  schema: {
    model: {
      id: "uid",
      fields: {
        lastName: {editable:false},
        firstName: {editable:false},
        email: {editable:false},
        accountNum: {editable:false},
        email: {editable:false},
        status: {editable:true},
        RQ:{editable:true, type:"boolean"},
        RR:{editable:true, type:"boolean"},
        ER:{editable:true, type:"boolean"},     
      }
    }
  },
  batch: true,
  pageSize: 50
});


$("#grid").kendoGrid({
    dataSource: dataSource, 
    editable: "inline",
    pageable: {
        refresh: false,
        pageSize: 50,
        pageSizes: [
            50,
            100,
            200
        ]
    },
    filterable: {
        extra: false,
        operators: {
            string: {
                contains: "Contains",
                startswith: "Starts with"
            },          
        }
    },
    reorderable: true,
    resizable: true,
    columns: columnsettings,
    edit: function(e){
        //$('#grid').data('kendoGrid').dataSource.read();
        console.log('an edit happened');
        console.log(e);
        //e.preventDefault();
    },
    cancel: function(e){
        //$('#grid').data('kendoGrid').dataSource.read();
        //$('#grid').data('kendoGrid').dataSource.sync();
        console.log('cancel happened');
        console.log(e);
        //e.preventDefault();
        $('#grid').data('kendoGrid').dataSource.read();
    },
    update: function(e){
        console.log('an update happened');
        console.log(e);
    },
    change: function(e){
        console.log('a change happened not datasource one');
        console.log(e);
    },
    saveChanges: function(e){
        console.log('a save is about to occurr');
        console.log(e);
    },
    // get grid state to save to DB
    dataBound: function(e){
        var grid = this;
        var dataSource = this.dataSource;
        var state = kendo.stringify({
            page: dataSource.page(),
            pageSize: dataSource.pageSize(),
            sort: dataSource.sort(),
            group: dataSource.group(),
            filter: dataSource.filter()
        });
    }
});





function customInlineEditor(container, options){
        var currentField = options.field;
        var inputField;
        if(options.model[currentField] === true){
            inputField = $('<input type="checkbox" data-value-field="'+currentField+'" name="'+currentField+'" checked>');
        }else if(options.model[currentField] === false){
            inputField = $('<input type="checkbox" name="'+currentField+'">');
        }else{
            //inputField = "Locked";
        }
        container.append(inputField);
    }

Answer 1

未定义传输的 Kendo Grid 旨在仅“显示”数据，而不是编辑数据。您可以做的是将传输操作声明为函数，而不是对“保存”、“更新”、“编辑”等事件使用事件处理程序。

var data = [
  { Id: 1, Name: "Decision 1", Position: 1 },
  { Id: 2, Name: "Decision 2", Position: 2 },
  { Id: 3, Name: "Decision 3", Position: 3 }
];

var dataSource = new kendo.data.DataSource({
  //data: data,
  transport: {
    read: function(e) {                                
      e.success(data);
    },
    update: function(e) {                                
      e.success();
    }, 
    create: function(e) {
      var item = e.data;
      item.Id = data.length + 1;
      e.success(item);
    }
  },

Here是一个应该可以正常工作的示例。