Programatically deselect React Grid Rows Checkbox

[Akhmad Agosto]

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.

[Akhmad Agosto]

Also I would like to add that the reason I used the element onClick approach within the dataBound event is because simply calling the state action handler using the change event will cause an infinite loop due the change event being fire after every UI re-render. I don't quite understand why that happens.

[Stefan]

Hello, Akhmad,

If the desired result is to manually select and deselect rows using a checkbox, I can recommend using our built-in checkbox selection feature:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.selectable

http://dojo.telerik.com/uheCI

The change event should also not be fired when the Grid is re-rendered.

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Akhmad Agosto]

Thank you for the reply Stefan,

Yes, I am indeed using the built it checkbox feature. The reason I was trying to manually select/deselect them was because the change event was looping infintely for me. This however, turns out to be a problem with Redux and how the Grid's datasource being linked directly to the store, as the dispatcher would be called again after a rerender (not the change event as I stated previosuly). I was able to work around this issue by using React's shouldComponentUpdate function and simply prevent the grid from rerendering when I update the required state.