Change Button text in Kendo Ui Grid Popup Window

Question

I've got a Kendo UI Grid that loads a popup when creating a new or editing an existing record.

I struggling to find a way to change the change the text of the Update button to "Save" when I'm creating a new record (it currently says "Update" - and its not correct).

I was able to change the title of the popup window, but my question is: how do I change the button text?

This is the code:

 $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            sortable: true,
            groupable: true,
            height: resizeGrid(),
            filterable: true,
            toolbar: ["create"],
            columns: [
                { field: "OfficeName", title: "Office Name" },
                { field: "SupportNo", title: "Phone No.", width: "100px" },
                { field: "SupportEmail", title: "Email Address", width: "130px" },
                { field: "SupportFax", title: "Fax No.", width: "100px" },
                { field: "SupportFtp", title: "Ftp Url", width: "150px" },
                { command: ["edit", "destroy"], title: "Actions", width: "160px" }],
            editable: "popup",
            edit: function (e) {
                var editWindow = e.container.data("kendoWindow");

                if (e.model.isNew()) {
                    e.container.data("kendoWindow").title('Add New Office');
                    $(".k-grid-update").text = "Save";
                }
                else {
                    e.container.data("kendoWindow").title('Edit Office');
                }
            }
        });

Solution 1

You should define command as:

command: [
    {
        name: "edit",
        text: { 
            edit: "Edit",               // This is the localization for Edit button
            update: "Save",             // This is the localization for Update button
            cancel: "Cancel changes"    // This is the localization for Cancel button
        }
    },
    { 
        name: "destroy", 
        text: "Delete Office"           // This is the localization for Delete button
    }
]

In addition, if you also want to change the text Edit in the popup window, you should use:

editable  : {
    mode : "popup",
    window : {
        title: "Edit Office",           // Localization for Edit in the popup window
    }
}

Solution 2

This will update the text in the button of the PopUp Editor:

if (e.model.isNew()) {
  $("a.k-grid-update")[0].innerHTML = "<span class='k-icon k-update'></span>Activate";
}
else {
  $("a.k-grid-update")[0].innerHTML = "<span class='k-icon k-update'></span>Save";
}

Solution 3

edit: function (e) {
    if (e.model.isNew()) {
        $(".k-window-title")[0].innerHTML = "Add";
    }
}

Comments

[EdsonF]

Thanks for response OnaBai I believe that what you are suggesting would work for a editable grid correct? My issue is that I want to change the Update button on the popup that I use to edit a particular row. Presumably it would be hooked of the edit event like the one I've placed in the code above ? but I'm using jQuery and it does not work. What do you recommend in this situation OnaBai?

[OnaBai]

This works for the Update button of your edit row. For this, you don't need jQuery. Kendo UI uses these labels when generating the buttons for the popup window

[Charmie]

how about for adding new records?

[OnaBai]

@Charmie, what do you mean about "how about for adding new records"?

[Charmie]

In the kendogrid, we have toolbar right? Say, we have toolbar: ['create'], everytime I hit that "Create" new record for the grid, there will be a popup for me to key in the record. On that popup, there will be default buttons labeled "Update" and "Cancel". I just find it inappropriate that if I am technically "Creating" a new record, isn't it should be "Create" not "Update"? Can I change these buttons' label?

[OnaBai]

Yes, you can. You should define the message that you want to show using messages.commands.create