CODEWITHSUNDEEP
jqueryasp.net-mvc-4kendo-uikendo-gridkendo-asp.net-mvc
Pankaj Dubey
Pankaj Dubey

Reputation: 824

select unselect rows of kendo UI Grid with checkbox

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

Upvotes: 1

Views: 15732

Answers (5)

Pankaj Dubey
Pankaj Dubey

Reputation: 824

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

Upvotes: 2

Jaimin
Jaimin

Reputation: 8020

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

}

Upvotes: 0

Paritosh
Paritosh

Reputation: 11570

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

Upvotes: 3

AntouanK
AntouanK

Reputation: 4968

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')

Upvotes: 0

chris
chris

Reputation: 4867

Try this:

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

Or this:

How to unselect the grid record in kendoui

Upvotes: 0

Related Questions