I am trying to manually select/deselect React Grid rows (using checkbox) while calling a React/Redux action state handler so I have a dynamically updated state variable containing the selected rows ID's. Here's my code:
dataBound={function(e) {
var grid = this
$('tbody > tr > td > .k-checkbox').on('click',
function(event){
var row = $(this).closest('tr')
if(row.hasClass("k-state-selected")==false){
console.log("OFF > ON")
grid.select(row)
updateSelection('selection',grid.selectedKeyNames())
}
else{
console.log("ON > OFF")
row.removeClass("k-state-selected")
event.stopPropagation()
updateSelection('selection',grid.selectedKeyNames())
}
})
}
}
While the select action successfully updates the UI and the state variable, the removeClass function doesn't seem to work and the row/checkbox remains selected (after a UI rerender). The state handler does fire although obviously changes nothing state wise because the row UI remains selected. I tried calling the removeClass right after the select function to see if it works or not, and it still does not do anything. Am I missing something? Also, while removing the "k-state-selected" should technically "deselect" the row, how do I "uncheck" the required row checkbox?
Help would be appreciated.