選中取消選中的kendo UI Grid行和復選框

Question

我有一個kendo-UI網格，其中，我使用過ClientRowTemplates。 在每一行中我都有一個復選框，當我從網格中選擇一行時，更改事件將被觸發（我已經實現了多行選擇）。 當我檢查該行的復選框時我想選擇行，反之亦然，但是當我檢查第一次選中的復選框時，發生的情況是正常的，但當我取消選中復選框時行沒有被取消選擇。 有什么建議..

感謝您..

我得到的所有答案都是similer：我知道改變css類可以，但是如果用戶選擇了多行（比方說20行）並且其中只想取消選擇一行，那么我給了他一個復選框，以便他可以在這種情況下取​​消選擇相關行，我必須阻止更改事件，因為當我要檢查復選框時，所有選定的行都將被取消選擇\\\\注意：如果用戶選擇了行，將自動檢查行的復選框行

讓我知道任何可以在更改網格事件之前觸發的checek盒事件

Answer 1

上復選框不選中事件，刪除類k-state-selected為tr和屬性aria-selected="true"
只是從tr刪除類可能會導致沖突，因為該行的aria-selected屬性將存在 - 您可以使用瀏覽器開發工具進行檢查。

$(rowToUnselect).removeAttr('aria-selected');
$(rowToUnselect).removeClass('k-state-selected');

更新：如果您已設置selectable: "multiple row"網格的selectable: "multiple row" 或網格change ，並希望以您希望的方式更改行為，然后將其刪除，並為每個tr手動附加click事件。

$('#grid tbody tr').on('click', function(){
    //select-deselect check-box
    //accordingly, add/remove 'k-state-selected'
    //add/remove attribute 'aria-selected'
});

Answer 2

謝謝大家關心我的問題......你們給我提了很多幫助我的東西......但是我創建了自己的解決方案，我把我的復選框放在一個類似於......的div中。

<div id='checkcontainerdiv' onmouseup='CheckMouseDown(event);'>
  <input type='check' />
</div>

然后在CheckMouseDown（事件）函數中我寫了..

function CheckMouseDown(event) {
    var CheckContainerDiv = $(event.target);
    var gridrow = CheckContainerDiv.parents().filter("tr#gridrow");
    var IsSelected = gridrow.attr("aria-selected");
    if (IsSelected != null && IsSelected.trim().toLowerCase() == "true") {
        //Now i removed gridrow from $("#MyEmailGrid").data("kendoGrid").select() collection
    }
    else {
        //Now i added gridrow to $("#MyEmailGrid").data("kendoGrid").select() collection
    }
}

現在你們都會想到我是如何阻止gridview的Change事件的。 為此，我添加了GridBound的GridBound事件，這里......

function GridDataBound() {
    $('#MyGrid').data('kendoGrid').tbody.on('mousedown', 'div#checkcontainerdiv', function (e) {
        e.stopImmediatePropagation();
    });
}

e.stopImmediatePropagation這里將停止更改或網格的任何默認事件''mousedown'事件'div＃checkcontainerdiv'將發生

享受如果有相同的問題....再次感謝..

Answer 3

嘗試這個：

$(rowToDeselect).removeClass("k-state-selected");

或這個：

如何取消選擇kendoui中的網格記錄

Answer 4

當取消選中一個復選框時，你必須手動完成它（或者將它綁定為自動完成它）我在他們的api中看不到任何取消選擇方法，所以你可以嘗試一種丑陋的CSS方式。 只需在網格中執行此操作，即可從選定的行中刪除選定的CSS類

$('tr.k-state-selected','#grid').removeClass('k-state-selected')

Answer 5

當您的復選框列首次出現在grid.OnCheckbox中時單擊嘗試此代碼。

ClientTemplate("<input type='checkbox'  #=ID ? checked='checked':'' # class='chkbxchild margin_l30' onclick='SetCheckBOX(this)' />");


function SetCheckBOX(this)
{
  if ($(this).is(':checked')) {
            $(this).parent().parent().attr("class", "k-state-selected");
        }
        else {
            $(this).parent().parent().removeAttr("class", "k-state-selected");
        }

}