how to get kendoui grid popup add/edit form created from kendo template, show the correct title for add and edit operations?

Question

I can't seem to find a simple way to set the title on a popup add and edit form launched from the kendoui grid, when it is created using a custom template. When I tried the following example, both Add and Edit operations had "Edit" in the title bar of the popup:

Markup:

<script id="popup-editor" type="text/x-kendo-template">
  <p>
    <label>Name:<input name="name" /></label>
  </p>
  <p>
    <label>Age: <input data-role="numerictextbox" name="age" /></label>
  </p>
</script>
<div id="grid"></div>

JavaScript:

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  },
    toolbar: [{ name: 'create', text: 'Add' }]
});

Fiddle demonstrating the issue: http://jsfiddle.net/codeowl/XN5rM/1/

The issue is that when you press the Add or Edit buttons, the title bar in the popup says: "Edit". I want it to say Add when you press the Add button and Edit when you press the Edit button.

Thank you for your time,

Regards,

Scott

Answer 1

If you want a simple solution, add code to the edit event of the grid to check to see if the model being created when edit is called is a new one or an existing one and set the text accordingly:

...

edit: function (e) {
   //add a title
   if (e.model.isNew()) {
       $(".k-window-title").text("Add");
   } else {
       $(".k-window-title").text("Edit");
   }
}

...

Hope this helps...