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.

Buttons in english

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:

Grid commands localized

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:

Update and Cancel not localized

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:
Localized buttons on edit popup window

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

Title localized

Advertisements

6 thoughts on “KendoUI: localization of grid popup window, Yes, we can!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s