【问题标题】:Kendo Grid - Custom Editor, Update Not Firing, Rows DeletingKendo Grid - 自定义编辑器,更新不触发,行删除
【发布时间】:2013-10-29 16:38:54
【问题描述】:

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

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

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

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);
    }

【问题讨论】:

    标签: javascript jquery kendo-ui kendo-grid


    【解决方案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 是一个应该可以正常工作的示例。

    【讨论】:

    • 这允许我编辑一条记录,并将更改保存到屏幕上。当一行处于编辑模式并单击另一个编辑按钮时,删除一行仍然是一个奇怪的问题。对此的任何想法也将不胜感激。非常感谢您对本地数据的解释。
    • 修改示例并分享一个链接,以便我可以看到奇怪的行为并进行调查。
    • 是的,我想知道我使用的版本是否有错误... v2013.1.319
    • 在我的场景中,我必须定义方案才能正确获取更新回调,如示例链接中所示。
    【解决方案2】:

    虽然这在游戏中已经很晚了,但我认为查看整个数据源会对其他人有所帮助。

    一些与 Kendo 相关的文档的一个问题是,一些示例不够深入,无法反映实际的实际实现。

            return new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read:
                        function (options) {
                            var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read");
    
                            dataFactory.getList(odataParams)
                                .success(function (result) {
                                    options.success(result);
                                })
                                .error(function (error) {
                                    console.log("data error");
                                });
    
                            //$http({
                            //    url: crudServiceBaseUrl,
                            //    method: 'GET',
                            //    params: odataParams
                            //})
                            //.success(function (result) {
                            //    options.success(result);
                            //});
                        },
                    //{
                    //    url: crudServiceBaseUrl,
                    //    dataType: "json"
                    //},
    
    
    
                    // {function (options) {
                    //    //var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read");   // "{"take":"10","skip":"0","page":"1","pageSize":"10"}"
                    //    (new abstractFactory2().query({ odataUrl: crudServiceBaseUrl })).$getAll()
                    //        .then(function (data) {
                    //            return options.success(data);
                    //        });
    
    
                    //var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read");   // "{"take":"10","skip":"0","page":"1","pageSize":"10"}"
                    //contentTypeFactory.getList()
                    //    .success(function (data) {
                    //        return options.success(data);
                    //    })
                    //    .error(function (error) {
                    //        console.log(error);
                    //    });
                    //},
                    update:
                        function (options) {
                            //var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "update");
                            var data = options.data;
                            dataFactory.update(data.ContentTypeId, data)
                                .success(function (result) {
                                    // call standard error message function
                                    customFunctions.showConfirmation();
                                    options.success(result);
                                })
                                .error(function (error) {
                                    customFunctions.showError("Update Failed"); // use default error message
                                    console.log("data error");
                                });
    
                            //{ // PUT
                            //url: function (data) {
                            //    console.log(data);
                            //    dataType: "json"
                            //    return crudServiceBaseUrl + "(" + data.ContentTypeId + ")";
                            //},
                            //error: function (e) {
                            //    console.log("error: " + e);
                            //}
                        },
                    create:
                        function (options) {
                            var data = options.data;
                            data.ContentTypeId = "0";           // required for valid field data
                            dataFactory.insert(data)
                                .success(function (result) {
                                    options.success(result);
                                })
                                .error(function (error) {
                                    customFunctions.showError("Create Failed"); // use default error message
                                });
    
                            //{ // POST
                            //data: function (data) {
                            //    // reformat the data to match the DTO
                            //    data.ContentTypeId = "0";
                            //    data.NumberOfContentTypes = "0";
                            //    //data.msrepl_tran_version = "00000000-0000-0000-0000-000000000000";
                            //    return data;
                            //},
                            //url: function (data) {
                            //    console.log(data);
                            //    return crudServiceBaseUrl;
                            //},
                            //error: function (e) {
                            //    console.log("create error: " + e);
                            //},
                            //dataType: "json",
                        },
                    destroy:
                        function (options) {
                            var data = options.data;
                            dataFactory.remove(data.ContentTypeId)
                                .success(function (result) {
                                    options.success(result);
                                })
                                .error(function (error) {
                                    console.log("data error");
                                });
    
                            //{
                            //url: function (data) {
                            //    dataType: "json";
                            //    return crudServiceBaseUrl + "(" + data.ContentTypeId + ")";
                            //},
                            //success: function (e) {
                            //    console.log("success");
                            //},
                            //error: function (e) {
                            //    console.log(e);
                            //}
                        },
                    parameterMap: function (options, type) {
                        // this is optional - if we need to remove any parameters (due to partial OData support in WebAPI
                        if (operation !== "read" && options.models) {
                            return JSON.stringify({ models: options });
                        }
                        //var parameterMap = kendo.data.transports.odata.parameterMap(options);
    
                        //delete parameterMap.$inlinecount;               // remove inlinecount parameter
                        //delete parameterMap.$format;                    // remove format parameter
    
                        //return parameterMap;
                    },
    
                },
                batch: false,
                pageSize: 10,
                serverPaging: true,
                change: function (e) {
                    console.log("change: " + e.action);
                    // do something with e
                },
                schema: {
                    data: function (data) {
                        //console.log(data)
                        return data.value;
                    },
                    total: function (data) {
                        console.log("count: " + data["odata.count"]);
                        return data["odata.count"];
                    },
                    model: {
                        id: "ContentTypeId",
                        fields: {
                            ContentTypeId: { editable: false, nullable: true },
                            //UserId: {editable: false, nullable: false },
                            Description: { type: "string", validation: { required: true } },
                            //msrepl_tran_version: { type: "string", validation: { required: true } }
                        }
                    }
                },
                error: function (e) {
                    //var response = JSON.parse(e.responseText);
                    var response = e.status;
                    console.log(response);
                }
            })  // dataSource
    

    这是完整的 KendoUI OData 数据源,最初使用默认的 KendoUI 处理方式(注释掉不同传输部分中的部分 - 留作参考)。不同之处在于它公开了 Kendo 选项并将它们存储在 odataParams 中,然后将它们传递给处理通信的 AngularJS factory provider

    记下parameterMap: 部分,并在此处设置断点以查看其中经过的内容,以供参考。

    还有一些额外的调试console.log()'s 放在那里。

    希望这是有益的。

    【讨论】:

      猜你喜欢
      • 2014-06-01
      • 1970-01-01
      • 2017-06-14
      • 1970-01-01
      • 2015-12-15
      • 2017-11-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多