select unselect rows of kendo UI Grid with checkbox

Question

I have a kendo-UI grid, in which, i have used ClientRowTemplates. In each row i have a check-box, when i am selecting a row from grid, change event is getting fired that is intended (I have implemented multiple row selection). I wanted to select the row when i check the check-box of that row and vice-versa, but what happening is when i check the check-box for first time row is getting selected that is fine but when i uncheck the check-box row is not getting unselected. Is there any suggestion..

thanking you..

all answers that i get are similer: I know that changing css class can, but if user has selected multiple (lets say 20) rows and among them he want to unselect only one row, in that case i gave him a check box so that he can unselect that perticuler row in that case i must prevent the change event because when i am going to check the check box, all the selected rows will be unselected \\ NOTE:a check box of row will be checked automatically if user selects the row

let me know any event of checek box that can fire before change event of grid

Paritosh · Answer 1 · 2013-07-02T07:20:45.737

On checkbox uncheck event, remove class k-state-selected for tr and attribute aria-selected="true"
Just removing class from tr might cause conflict as aria-selected attribute will be there for that row - You can check it using browser developer tool.

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

Update: If you have set selectable: "multiple row" OR grid change for the grid and want to change the behaviour the way you want, then remove it, and manually attach click event for each tr.

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

score 2 · Accepted Answer · answered Jul 02 '13 at 09:27

Thanks everybody who cared for my question... You guys suggested me a lot of things that helped me very much.... but i created my own solution in which i put my checkbox in a div that was something like....

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

and then in CheckMouseDown(event) function i wrote..

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
    }
}

Now you all will be thinking that how i prevented the Change event of gridview. For that purpose, I added DataBound event of grid, which is here...

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

e.stopImmediatePropagation here will stop the change or any default event of grid when 'mousedown' event of 'div#checkcontainerdiv' will occur

enjoy if have the same issue.... thanks again..

score 0 · Answer 3 · edited May 23 '17 at 12:00

0

Try this:

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

Or this:

How to unselect the grid record in kendoui

edited May 23 '17 at 12:00

Community

1
1

answered Jul 02 '13 at 06:43

chris

4,827
6
35
53

yes, I know it can work, but if user has selected multiple (lets say 20) rows and among them he want to unselect only one row, in that case i gave him a check box so that he can unselect that perticuler row in that case i must prevent the change event \\\ NOTE:a check box of row will be checked automatically if user selects the row – Pankaj Dubey Jul 02 '13 at 06:49

score 0 · Answer 4 · answered Jul 02 '13 at 06:50

0

You have to do it manually when a checkbox is unchecked ( or bind it somewhow to get it done automatically ) I don't see any unselect method in their api, so you can try an ugly CSS way. Just do this in the grid, to remove the selected CSS class from the selected line

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

answered Jul 02 '13 at 06:50

AntouanK

4,880
1
21
26

Then just bind the status of the checkbox, with the k-state-selected class of each row ( and the aria-selected attribute if it's necessary ) So that the one changes the other without you worrying about anything. – AntouanK Jul 02 '13 at 07:11

score 0 · Answer 5 · answered Jul 02 '13 at 08:05

This working when your checkbox column is first in your grid.OnCheckbox click try this code.

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

}

select unselect rows of kendo UI Grid with checkbox

5 Answers5