KendoUI: localization of grid popup window, Yes, we can!

Few weeks ago I’ve started answering question on Stack Overflow about KendoUI.

One that was a little bit tricky since I couldn’t find any information on Kendo UI web was about how to localize the text for Update and Cancel that are displayed in the popup window for editing a cell of a Grid but you can actually do it.

Localize popup window for editing rows on Kendo UI grid

The very first part of the localization (change text shown on columns buttons) is pretty easy and is documented on Kendo UI Grid Documentation (see here) and is as simple as:

columns   : [
    {
        command: [
            { name: "edit", text: "Editar" },
            { name: "destroy", text: "Borrar" }
        ],
        width  : 140
    },
    {
        field: "FirstName",
        width: 90,
        title: "First Name"
    },
    {
        field: "LastName",
        width: 90,
        title: "Last Name"
    }
]

Doing this we get:

but it is not done yet (otherwise I wouldn’t be writing a post just to show the same that you can find in the documentation).

The problem is:

where you can see that when the window open “Update” and “Cancel” buttons for closing the window accepting or rejecting changes are not localized.

And I couldn’t find information on KendoUI web on it. So, how can we localize them.

Despite Kendo UI documentation says that columns.command.text is a string for Edit button it can actually be an object with three fields:

1. edit the localized text for Grid cell button.
2. update the localized text for the update button on edit popup window.
3. cancel the localized text for the cancel button on edit popup window.

So the definition is:

command: [
    {
        name: "edit",
        text: { edit: "Editar", update: "Actualizar", cancel: "Cancelar"}
    },
    { name: "destroy", text: "Borrar" }
],

Now, the popup window is displayed as:

But there is still one missing question, if you take a look into the title of the popup window, you will realize that it says Edit. But there is also a hidden option for localizing it:

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

Yes! there is a window option in editable that allows you to set options to the popup window. Any option of kendoWindow is available: resizable. modal, draggable…