Kendo ui grid 在编辑模式引用第三方编辑器第一次得不到内容的问题

  • 发布日期:2016年3月12日
  • 新闻类别: KendoUI
  • 查看:812

在开发一个新闻模块时,使用了kendo ui grid来管理,在弹窗编辑模式下,由于使用了第三方的在线编辑器,第一次他会得不到内容,需手动在里面编辑下他才会感应到。所以需要增加额外的监听事件,监听change事件。

例:


 $("#grid").kendoGrid({               
                columns: [
                     {
                         field: "ImageFile",
                         title: "缩略图",
                         width: "180px", template: ""
                     },
                            {
                                field: "Title",
                                title: "主题",                           
                                width: "180px"                               
                            },
                             {
                                 field: "Category",
                                 title: "分类",
                                 width: "120px"                                 
                             },
                   
                   { 
                       field: "Click",
                       title: "查看",
                       format: "{0:N0}",
                       width: "120px",                      
                   },
                    {
                        field: "AddDate",
                        title: "发布日期",
                        format: "{0:d}",
                        width: "120px",
                    },
                     { command: ["edit", "destroy"], title: " ", width: "250px" }
                ],
                toolbar: ["create"], // specify toolbar commands    
                editable: {
                    mode: "popup",
                    window: {
                        width: 1000,
                        title: "编辑"
                    },
                    template: $("#popup_editor").html()
                },
                edit: function (e) {

                    var editor = CKEDITOR.replace("Content", {
                        filebrowserImageBrowseUrl: '/Content/plugins/ckfinder/ckfinder.html?type=Images',
                        filebrowserUploadUrl: '/Content/plugins/ckfinder/core/connector/aspx/connector?command=QuickUpload&type=Files',
                        //    filebrowserImageUploadUrl: '/Content/Uploads'
                    });
                    
                    CKFinder.setupCKEditor(editor, '/Content/plugins/ckfinder/');

                    editor.on('mode', function () {
                        if (this.mode == 'source') {
                            var editable = bodyEditor.editable();
                            editable.attachListener(editable, 'input', function () {
                             //   e.model.Content = $('textarea[name="Content"]').html();
                                e.container.find("[name=Content]")
                                .val(this.getData())
                                .trigger("change");
                                //debugger;
                            });
                        }
                    });

                    // Handle when the HTML changes.
                    editor.on('change', function () {
                        //e.model.Content = this.getData();
                        e.container.find("[name=Content]")
                        .val(this.getData())
                        .trigger("change");
                        //debugger;
                    });

                    $(".loadImage").on("click", function () {
                        var finder = new CKFinder();
                        //  finder.basePath = '/plugins/ckfinder/';
                        finder.selectActionFunction = function (fileUrl, data) {
                            var textbox = $("[name='ImageFile']")
                            textbox.val(fileUrl);
                          //  e.model.ImageFile = fileUrl;
                            e.container.find("[name=ImageFile]")
                                .val(fileUrl)
                                .trigger("change");
                        }
                        finder.popup();
                    });

                    $('input[name=CategoryId]')
                       .kendoDropDownList({
                           autoBind: true,
                           dataSource: {
                             //  type: "odata",
                               transport: {
                                   read: "/Api/NewsCategory/GetAll"
                               }
                           },
                           optionLabel: "--请选择分类--"
                       });

                },
                pageable: true,
                sortable: true,
                filterable: true,
               
                dataSource: {
                    serverSorting: true,
                    serverPaging: true,
                    serverFiltering: true,
                    pageSize: 15,
                    error: function (e) {
                        var msg = JSON.parse(e.xhr.responseText);                       
                        // Cancel the changes made to kendo grid
                        $("#grid").data('kendoGrid').cancelChanges();
                        // Show the message to user
                        alert(msg.Message);
                    },
                    
                    schema: {
                        data: "Data", // ASMX services return JSON in the following format { "d":  }. Specify how to get the result.
                        total: "Total",
                        model: { // define the model of the data source. Required for validation and property types.
                            id: "Id",
                            fields: {
                                Id: { editable: false, nullable: true },
                                CategoryId: {type: "number", validation: { required: true } },
                                Title: { type: "string" , validation: { required: true}},
                                Click: { type: "number", editable: false, },
                                AddDate: { type: "date", editable: false, },
                                ImageFile: { type: "string" , validation: { required: true}},
                            }
                        }
                    },                  
                    transport: {
                        create: {
                            url: "/api/News/Create",
                            contentType: "application/json",
                            type: "POST"
                        },
                        update: {
                            url: function (vm) {
                                return "/api/News/Update/" + vm.Id;
                            },
                            contentType: "application/json",
                            type: "PUT"
                        },
                        read: {
                            url: "/api/News/Read",
                            contentType: "application/json"
                        },
                        destroy: {
                            url: function (vm) {
                                return "/api/News/Delete/" + vm.Id;
                            },
                            contentType: "application/json",
                            type: "DELETE"
                        },
                        parameterMap: function(data, type) {
                            if (type === 'create' || type === 'update' || type === 'destroy') {
                               // console.log(data);
                                // this changes the date to 'dd/MM/YYYY' format
                                // data.Date = kendo.toString(data.Date, 'd');
                            }
                            return JSON.stringify(data);
                        }
                        //parameterMap: function (data, operation) {
                        //    return JSON.stringify(data);
                        //}
                    }
                }
            });