Kendo Grid 用于创建和编辑的单独弹出窗口标题和按钮

Question

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

我在editable中设置了弹出窗口的标题

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下使用，但是根据我的编译器，这不是一个函数。

我浏览了整个互联网和 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 Forum，isNew

isNew 方法根据该模型的 id 值返回 true 或 false。 如果id 仍然设置为默认值，那么它将假定它是一个新模型。

所以我认为你的问题是因为你的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）