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

Question

I want to change the title of the editable popup window based on whether it is being used to create or edit a grid item (I want the fields to be the same for both of them, though).

I have set the popup window's title in editable

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

But I'm not sure how to differentiate between Edit and Add. The Edit button is in the columns:

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

and the Add button in the toolbar:

toolbar: [{name: 'create'}]

Notably, I've tried this to no avail:

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

I've also seen e.model.isNew() used under edit, but according to my compiler, this is not a function.

I've looked all over the internet and Telerik and found nothing. Am I missing something?

EDIT: Someone asked for the entirety of my grid code:

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

  }
});

Fateme Mirjalili Fateme Mirjalili · Accepted Answer · 2020-08-12T06:45:29

To change the title you should use edit function of the grid like this:

$("#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");
        }
    }

});

And for using the template, see this answer : Kendo UI Grid popup

Edit: According to 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.

So I think your problem is because of your dataSource, and you should fill id before the fields property. like this :

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
},

And here are two Samples: ( Sample 1 , Sample 2 )

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

1 Answers