Programatically deselect React Grid Rows Checkbox

4 posts, 0 answers
  1. Akhmad Agosto
    Akhmad Agosto avatar
    12 posts
    Member since:
    Oct 2017

    Posted 01 Jan 2018 Link to this post

    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.

  2. Akhmad Agosto
    Akhmad Agosto avatar
    12 posts
    Member since:
    Oct 2017

    Posted 01 Jan 2018 Link to this post

    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.
  3. Stefan
    Admin
    Stefan avatar
    3012 posts

    Posted 02 Jan 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Akhmad Agosto
    Akhmad Agosto avatar
    12 posts
    Member since:
    Oct 2017

    Posted 03 Jan 2018 in reply to Stefan Link to this post

    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.

Back to Top