Kendo 网格分离弹出窗口 Window 用于创建和编辑的标题和按钮

Question

我想更改可编辑弹出窗口的标题 window 根据它是用于创建还是编辑网格项目（不过我希望两者的字段相同） .

我已经在 editable

中设置了弹出窗口 window 的标题

editable: {
        mode: "popup",
        template: kendo.template($("#popupTemplate").html()),
        window: {
              title: "Add"
        }
  }

但我不确定如何区分“编辑”和“添加”。编辑按钮在列中：

command: [
        {
              name: "edit",
              text: {
                    edit: "Edit",
                    update: "Save",
                    cancel: "Cancel"
              }
        }
]

和工具栏中的添加按钮：

toolbar: [{name: 'create'}]

值得注意的是，我已经尝试过但无济于事：

toolbar: [
        {
              name: 'create',
              click: function(){
                    alert("test");
              }
        },
]

我也看到 e.model.isNew() 在 edit 下使用，但根据我的编译器，这不是函数。

我在 Internet 和 Telerik 上找遍了，但一无所获。我错过了什么吗？

编辑：有人询问了我的全部网格代码：

var grid = $('#grid').kendoGrid({
  //dataSource: this.source,
  dataSource: this.testData,
  height: 550,
  filterable: true,
  sortable: true,
  pageable: {
    pageSize: 30,
    buttonCount: 1
  },
  //toolbar: ["create", "destroy", "search"],
  toolbar: [
        {name: 'create'},
        {name: 'destroy'},
        {name: 'search'},
        {template: "<input id='category' type='search' style='width: 250px; float: right;'/>"}
  ],
  resizeable: true,
  columns: [
  {
    field: 'Name',
    title: 'Name',
    filterable: true,
  },
  {
    field: 'MCN',
    title: 'P/N',
    filterable: false,
  },
  {
    field: 'ID',
    title: 'ID',
    filterable: true,
  },
  {
    field: 'Type',
    title: 'Type',
    filterable: true,
  },
  {
    field: 'Subtype',
    title: 'Subtype',
    filterable: true,
  },
  {
    field: 'Value',
    title: 'Value',
    filterable: false,
  },
  {
    field: 'Tolerance',
    title: 'Tolerance',
    filterable: true, //Number/letter combination causes problem?
  },
  {
    command: [
        {
              name: "edit",
              text: {
                    edit: "Edit",
                    update: "Save",
                    cancel: "Cancel"
              }
        },
        {
              name: "copy",
              text: "Copy",
              //click: function 
        }
    ],
    title: "&nbsp;", width: "250px"
  },
  ],
  editable: {
        mode: "popup",
        template: kendo.template($("#popupTemplate").html()),
        // window: {
        //       title: "Add"
        // }
  },
  selectable: "multiple, row", // Select multiples by drag or Shift-Click
  edit: function(e){
        var container = e.container;
        var model = e.model;

        //console.log(model.get("ID"));

        // Changing the size of the container
        $(e.container).parent().css({
              //width: "1000px",
              //height: "500px"
        });

        //May be able to simplify this with a for loop
        // Changing Type input to a dropdown
        var input = $('#dropType');
        input.kendoDropDownList({
              dataTextField: "Type",
              dataValueField: "dropType",
              dataSource: [{Type: 'One'}, {Type: 'Two'}, {Type: 'Three'}],
        }).appendTo(container);

        // Changing Subtype input into a dropdown
        var input = $('#dropSubtype');
        input.kendoDropDownList({
              dataTextField: "Subtype",
              dataValueField: "dropSubtype",
              dataSource: [{Subtype: 'One'}, {Subtype: 'Two'}, {Subtype: 'Three'}],
        }).appendTo(container);

  }
});

Answer 1

要更改 title，您应该像这样使用网格的 edit 函数：

$("#grid").kendoGrid({
    dataSource: {...},
    height: 550,
    toolbar: ["create"],
    columns: [
        {
            field: "",
            title: '',
            attributes: { style: "text-align:center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            command: [
                { name: "edit", text: 'Edit' },
            ],
            title: 'tools',
            width: "200px",
            attributes: { style: "text-align:center;" },
            headerAttributes: { style: "text-align: center;" }
        }
    ],
    editable: {
        mode: "popup",
        template: $("#template").html(),
    },
    edit: function(e) {
        if (e.model.isNew()) {
            e.container.kendoWindow("title", "Createee");
        } else {
            e.container.kendoWindow("title", "Updateee");
        }
    }

});

关于模板的使用，请参阅此答案：Kendo UI Grid popup

编辑： 根据 kendo : Kendo Forum , isNew

The isNew method returns true or false depending on the id value of that model. If the id is still set to the default value then it will assume it is a New Model.

所以我认为你的问题是因为你的dataSource，你应该在fields 属性之前填写id。像这样：

dataSource: {
   transport: {
        read: {
            url: ...
            type: "POST", // The request type.
            dataType: "json", // The data type of the returned result.
        },
        create: {...},
        update: {...},
        destroy: {...}
    },
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: { editable: false },
                BankName: { type: "string", validation: { required: true } },
                ....
            }
        }
    },
    pageSize: 20
},

这里有两个示例：( Sample 1 , Sample 2 )

Kendo 网格分离弹出窗口 Window 用于创建和编辑的标题和按钮

Kendo Grid Separate Popup Window Title & Buttons for Create & Edit

javascript

jquery

kendo-ui

kendo-grid