kendo-ui - Kendo UI のコントロールによるデータのコピー

Question

2 つの別々の Kendo UI グリッドを使用して、UI コントロール (前後の矢印など) を介してデータをやり取りすることはできますか?

パターンは、左側のマスター リストを取得し、アイテムを選択して、右側に洗練されたリストを表示することです。

Answer 1

可能であり、それを行うのは難しくありませんが、自分で行う必要があるため、次のものが必要です。

1. KendoUIGridとDataSourceそれらが公開するイベントに関するある程度の知識。
2. 検証とエラーの回避に役立つ JavaScript + jQuery に関する知識。

次のグリッド定義を使用できます。

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

2 つのボタンを定義します。

1. から選択した行をコピーgrid1するgrid2
2. から選択した行をコピーgrid2するgrid1

ボタンの定義は次のとおりです。

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

そして、それを管理するための JavaScript:

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

この例はこちら