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 应该是这样的:

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

此示例此处

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