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

问题描述

我要根据是用于创建或编辑网格项目来更改可编辑弹出窗口的标题(不过,我希望两个字段的字段都相同)。

我已在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,但是根据我的编译器,这不是一个函数

我已经遍及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',},{
    field: 'MCN',title: 'P/N',filterable: false,{
    field: 'ID',title: 'ID',{
    field: 'Type',title: 'Type',{
    field: 'Subtype',title: 'Subtype',{
    field: 'Value',title: 'Value',{
    field: 'Tolerance',title: 'Tolerance',//Number/letter combination causes problem?
  },{
    command: [
        {
              name: "edit",cancel: "Cancel"
              }
        },{
              name: "copy",text: "copy",//click: function 
        }
    ],title: "&nbsp;",width: "250px"
  },],editable: {
        mode: "popup",// 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);

  }
});

解决方法

要更改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",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 ForumisNew

isNew方法根据该模型的true值返回falseid。 如果id仍设置为默认值,则它将假定它是一个新模型。

因此,我认为您的问题是由于您的dataSource而引起的,您应该在id属性之前填写fields。像这样:

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 1Sample 2