KendoUI move rows between grids


One other post that comes from my experience in Stack Overflow…

This time I will explain something that is commonly used: have two grids side by side and move rows between them.

These typically look like this:

Original two gridsWhere you can select one or more rows in both grids:

Rows selectionAnd then click on a button for moving selected arrows resulting:

Rows moved

Obviously, you can select rows in the second grid and move them back to the first.

KendoUI: moving rows between grids

First, I will start defining a container for both grids and buttons. This would be something like:

<div id="panels">
    <div id="grid1"></div>
    <div id="commands">
        <div><a href="#" id="copySelectedToGrid2" class="k-button">&gt;</a></div>
        <div><a href="#" id="copySelectedToGrid1" class="k-button">&lt;</a></div>
    </div>
    <div id="grid2"></div>
</div>

And I need some CSS styling:

#panels { display: table-row; }
#grid1, #grid2 { width: 400px; display: table-cell; }
#commands { text-align: center; width: 50px; vertical-align: middle; display: table-cell; }
#commands div { padding: 5px; }
#commands div a { width: 35px; text-align: center; }

Then, I define the grids that are something like this:

var grid1 = $("#grid1").kendoGrid({
    dataSource: ds1,
    editable:   "popup",
    selectable: "multiple",
    pageable:   false,
    columns:    [
        { field: "FirstName", width: 90, title: "First Name" } ,
        { field: "LastName", width: 90, title: "Last Name" }
    ]
}).data("kendoGrid");

var grid2 = $("#grid2").kendoGrid({
    dataSource: ds2,
    editable:   "popup",
    selectable: "multiple",
    pageable:   false,
    columns:    [
        { field: "FirstName", width: 90, title: "First Name" } ,
        { field: "LastName", width: 90, title: "Last Name" }
    ]
}).data("kendoGrid");

The only remarkable question is that I’m allowing multiple selection and disabling pagination since I want visible all values of each of the grids (making easier see how rows move between grids).

Moving rows

The first part is defining the click event handler for the two buttons. This is something like:

$("#copySelectedToGrid2").on("click", function (idx, elem) {
    moveTo(grid1, grid2);
});
$("#copySelectedToGrid1").on("click", function (idx, elem) {
    moveTo(grid2, grid1);
});

And moveTo function is:

function moveTo(from, to) {
    var selected = from.select();
    if (selected.length > 0) {
        var items = [];
        $.each(selected, function (idx, elem) {
            items.push(from.dataItem(elem));
        });
        var fromDS = from.dataSource;
        var toDS = to.dataSource;
        $.each(items, function (idx, elem) {
            toDS.add($.extend({}, elem));
            fromDS.remove(elem);
        });
        toDS.sync();
        fromDS.sync();
    }
}

Where I get selected rows and iterate getting the items selected. The reason why I do it in two steps (get the data item and the insert into second grid and remove from the first grid) is because arrays are expected to immutable, which means: I cannot remove one element from an array while iterating on it since this alters the array not being able to correctly continue the iteration.

Finally, I invoke sync on both DataSources for sending the modification to the server.

Pretty easy, don’t think so!

If you want to see it running, there is a JSFiddle here.

Advertisements

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