2

ブール値を変更するためのチェックボックスのある列を持つ編集可能な剣道グリッドがあります。私は完全に機能しているOnaBaiによって提案されたこのソリューションを使用しました!

唯一の問題は、チェックボックスの値の変更が遅すぎることです。ユーザーがクリックすると、変更に約 1 秒かかります。この遅延により、dataItem.set()メソッドに責任があることがわかります。

私のグリッドにはかなりの量のデータがあります。約 30 ～ 40 列、300 行以上。次のように定義されています。

$("#mainGrid").kendoGrid({
    dataSource: dataSource,

    pageable: false,
    sortable: true,

    scrollable: true,
    editable: true,
    autoBind: false,
    columnMenu: true, // Cria o menu de exibição de colunas
    height: getGridHeight(),

    toolbar: [/* hide for brevity */],
    columns: [/* hide for brevity */],
    dataBound: function() { /* hide for brevity. */},
    edit: function() { /* hide for brevity. */}
});

別の詳細は、dataItem.set()呼び出されたときにイベントを呼び出しdataBound()ますが、それが遅延の原因ではないということです。このプロセスではグリッドのedit()メソッドが呼び出されていません。dataSourceコードを投稿する価値があるかどうかはわかりません。

4

4 に答える 4

0

@DontVoteMeDown のような解決策を実行しました。しかし、ネストされたグリッド (マスター/詳細) があるため、イベント パラメーターから親グリッドを取得します。また、チェックボックスでクリックイベントをトリガーするだけです。

$("#grid .k-grid-content").on("change", "input.chkbx", function (e) {
    // Get the parent grid of the checkbox. This can either be the master grid or the detail grid.
    var parentGrid = $(e.target).closest('div[data-role="grid"]').data("kendoGrid");
    // Get the clicked cell.
    var td = $(e.target).closest("td");
    // Enter the cell's edit mode.
    parentGrid.editCell(td);
    // Find the checkbox in the cell (which now is in "edit-mode").
    var checkbox = td.children("input[type=checkbox]");
    // Trigger a click (which will toggle check/uncheck).
    checkbox.trigger("click");
});
于 2016-01-29T13:50:38.763 に答える
0

次のようなことを試してください：

[編集] ボタンで列を次のように設定します。

columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true);

そして、最初の列をクリックすると（ハイパーリンク付きの画像があります）、onclick関数を使用してプログラムで[編集]ボタンをクリックし、チェックボックスをクリックしてから[更新]ボタンをクリックします。おそらくもっと「古い学校」ですが、自分で更新する場合に行う順序に従っていることを知っているのが好きです。

オブジェクト ("this") を渡すので、表示されたときに行とチェックボックスを取得できます。新しいステータスは 0 または 1 です (これを使用するコードがいくつかありますが、このデモにはあまり必要ありませんが、簡単にするために、その部分を関数から除外しています)、およびそのアイテムの ID:

columns.Bound(p => p.IsActive).Title("Active").Width(100).ClientTemplate("# if (IsActive == true ) {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '0', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_1.png /></a> #} else {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '1', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_0.png /></a> #}#");

function changeCheckbox(obj, status, id) {
    var parentTr = obj.parentNode.parentNode;
    $('[id="btnEdit_' + id + '"]').click();

    parentTr.childNodes[5].childNodes[0].setAttribute("id", "btnUpdate_" + id); // my Update button is in the 6th column over
    parentTr.childNodes[0].childNodes[0].setAttribute("id", "chkbox_" + id);
    $('[id=chkbox_' + id + ']').click().trigger("change");
    $('[id=chkbox_' + id + ']').blur();

    var btnUpdate = $('[id="btnUpdate_' + id + '"]');
    $('[id="btnUpdate_' + id + '"]').click();

}

上記のコードは、もちろん、チェックボックスが最初の列にあることを前提としています。それ以外の場合は、childNodes[0]その chkbox setAttribute 行の最初の行を、ゼロからカウントを開始するためマイナス 1 の列に調整します。

于 2014-10-22T05:11:15.640 に答える
0

私は、OnaBai が提案したことを実行するための別の方法を見つけました。

// This is the grid
var grid = $("#mainGrid").data("kendoGrid");

// .flag is a class that is used on the checkboxes
grid.tbody.on("change", ".flag", function (e) 
{
    // Get the record uid
    var uid = grid.dataItem($(e.target).closest("tr")).uid;

    // Find the current cell
    var td = $(e.target).parent().parent();

    // This opens the cell to edit(edit mode)
    grid.editCell(td);

    // This ones changes the value of the Kendo's checkbox, that is quickly shown, 
    // changed and then hidden again. This marks the cell as 'dirty' too.
    $(td.find("input")[0]).prop("checked", $(e.target).is(":checked") ? "checked" : null).trigger("change").trigger("blur");
}
于 2013-11-05T11:28:13.383 に答える