用于创建按钮的KendoUI网格自定义弹出模板

Question

i have installed KendoGrid with POPUP option.

Now i am stuck someplace and i cant find any help to fix it with the way i want..

So here is problem that i am facing with KendoGrid popup editing.

When i click ADD New Record, the header on Top shows Edit, same as it shows on when i click on Edit.

http://jsfiddle.net/valchev/BCBzS/1/

also the button shows Update, instead it should be save button on create popup window..

i think i have to add something more like this below for creating new record..

editable: {
    mode: "popup",
    template: kendo.template($("#popup_editor").html())
},

and have the popup create template different from edit template?

Can anyone help me resolve this issue?

Answer 1

If you look at the demo page for popup editing this seems to be the normal behaviour...

But you can trick and use the edit event of the grid in order to change that. Just add at the beginning of this event the following code :

if(!e.model.Id) {
    $(".k-window .k-window-title").text("Add new record");
    $(".k-window .k-grid-update").html("<span class=\"k-icon k-update\"></span>Create");
}   

See the updated jsFiddle .

Answer 2

You can use Kendo UI grid localization for changing the popup titles.

For changing the Edit title you should define in the grid:

editable  : {
    mode : "popup",
    window : {
        title: "Create",
    }
},

For changing the label of the buttons we need to do a little trick... Those labels can be localized in column.command as follow:

columns   : [
    {
        command: [
            {
                name: "edit",
                text: { edit: "Modify", update: "Save", cancel: "Cancel"}
            }
        ],
    },
    ...

The problem is that both window title and button labels are shared between edit and create buttons so changing one you change both. Can you find some labels that work for both?

See it running in JS Fiddle

Answer 3

Do this by adding Following Code

                           edit: function (e) { if (!e.model.isNew()) {
                                e.container.kendoWindow("title", "Update Address");
                            } else {
                                e.container.kendoWindow("title", "New Address");
                            }
                        }