Kendo UI copying data through controls

Question

Is it possible to take 2 separate Kendo UI grids and be able to pass data back and forth through UI controls (like forward and backward arrows)?

The pattern would would be to take the master list on the left, select items and have a refined list on the right.

Answer 1

If is possible and it is not hard to do but you have to do it by yourself so you need:

1. Some knowledge on KendoUI Grid and DataSource and the events that they expose.
2. Some knowledge on JavaScript + jQuery that help you with the validations and avoiding errors.

Lets have the following grid definitions:

var grid1 = $("#grid1").kendoGrid({
    dataSource:  ds1,
    selectable:  "multiple",
    navigatable: true,
    pageable:    false,
    columns:     [
        { field: "name", title: "Name" },
        { field: "lastName", title: "Last Name" }
    ]
}).data("kendoGrid");

var grid2 = $("#grid2").kendoGrid({
    dataSource:  ds2,
    selectable:  "multiple",
    navigatable: true,
    pageable:    false,
    columns:     [
        { field: "name", title: "Name" },
        { field: "lastName", title: "Last Name" }
    ]
}).data("kendoGrid");

We define two buttons:

1. for copying selected rows from grid1 to grid2
2. for copying selected rows from grid2 to grid1

The button definition is:

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

And the JavaScript for managing it:

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

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

Finally the moveTo would be something like:

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({ name: elem.name, lastName: elem.lastName });
            fromDS.remove(elem);
        });
        toDS.sync();
        fromDS.sync();
    }
}

Example of this here