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

4 thoughts on “KendoUI move rows between grids

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