Kendo UI通过控件复制数据 [英] Kendo UI copying data through controls

问题描述

是否可以使用2个单独的Kendo UI网格，并能够通过UI控件来回传递数据(如前进和后退箭头)?

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.

推荐答案

如果可能的话，这并不难，但您必须自己做，所以需要:

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

1. 有关KendoUI Grid和DataSource以及它们公开的事件的一些知识.
2. 有关JavaScript + jQuery的一些知识，可帮助您进行验证并避免错误.

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");

我们定义了两个按钮:

1. 用于将选定的行从grid1复制到grid2
2. 用于将选定的行从grid2复制到grid1

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

按钮定义为:

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

以及用于管理它的JavaScript:

And the JavaScript for managing it:

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

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

最后，moveTo类似于:

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();
    }
}

此示例此处

这篇关于Kendo UI通过控件复制数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！