Uncheck specific rows in Kendo Grid select column in ASP.NET MVC using JavaScript and jQuery: Step-by-step guide

Question

I have a Kendo Grid in my ASP.NET MVC 5 project. One of the columns is a select column and I will try to uncheck the checkbox if it meets a certain condition. I've managed to deselect the checkbox. The problem is that it just changes the UI but doesn't remove the deselection from this.select(). Just uncheck the specific rows that make the condition = true and leave those rows that are false checked.

In summary, if the condition = true, I want to uncheck the box, remove it from this.select(), remove it from this.selectedKeyNames(), and Remove it from this._selectIds(). Do not delete the row from the table in the UI.

The code below is not the actual code I'm using, but something similar to it. The code below may not run.

function onChange(e) {
   var selectedRows = this.select();
   for(var i = 0; i < selectedRows.length; i++){
       selectedRows[i].find("input[type='checkbox']").prop('checked', false);
       if( 2 > 6) {
          alert("You can't select this");
    }
  }
}

Answer 1

It seems that the change event cannot be blocked in an event handler, so you can add a dataBound event handler and attach the click handler to the selection checkbox. If condition is met - stop propagation of event:

dataBound: function(){
          var grid = this;
          grid.tbody.find('tr .k-select-checkbox').on('click', function(e){
            var dataItem = grid.dataItem($(this).closest("tr"));
            if(dataItem.Discontinued){
              $(this).prop('checked', !$(this).prop('checked'));
              e.stopImmediatePropagation();
              kendo.alert(`${dataItem.ProductName} is discontinued, you cannot select it!`)
            }
          })
        }

In this example, you cannot select discontinued items.