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

Solution 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...

Solution 2

If the only thing that you need to do is add a title, you should use:

editable  : {
    mode : "popup",
    window : {
        title: "Edición",
    }
},

You don't need to define a template unless you need to define something else.

Your modified Fiddle here : http://jsfiddle.net/OnaBai/XN5rM/2/

Comments

[user2109254]

Thanks for responding mate. I want a custom layout to the form, this is why I am using a template, and it is because I am using a template that the window title says Edit, regardless of if I am adding or editing. Your proposed solution here will not solve this, however @NeilHibbert will. Thanks again for taking the time to respond.

[user2109254]

Perfect mate! Thanks for responding. Much appreciated!!

[Jacob]

@user2109254 Well you haven't accepted correct answer though you have only commented about correct answer :-)

[sendreams]

@Neil Hibbert, if i want to use my own button to invoke the grid's addnew popup editor, how can i do? thanks

[Atta H.]

I am using KendoUI MVVM with grid to add/update/delete. This is exactly what i was looking for.