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" 或网格change，并希望按照您希望的方式更改行为，那么将其删除，并为每个click手动附加tr个事件。

$('#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事件的。为此，我添加了Grid的DataBound事件，这就是......

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

e.stopImmediatePropagation会在'div＃checkcontainerdiv''mousedown'事件发生时停止更改或网格的任何默认事件

享受同样的问题.... 再次感谢..

Answer 3

试试这个：

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

或者这个：

How to unselect the grid record in kendoui

Answer 4

当取消选中复选框时，您必须手动执行此操作（或将其绑定到某个位置以自动完成）我没有在他们的api中看到任何unselect方法，所以你可以尝试一种丑陋的CSS方式。只需在网格中执行此操作，即可从选定的行中删除选定的CSS类

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

Answer 5

当你的复选框列首次出现在你的网格中时，这个工作.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");
        }

}

选中取消选中的带有复选框的kendo UI Grid行

5 个答案: