Checking or unchecking a kendo-checkbox placed on a kendo-grid row does not work

Question

I' am trying to add a checkbox column in a kendo-grid through Telerik's documentation. When I try to check or uncheck a checkbox from a row it does not work.

Here is my html:

<kendo-grid
    [data]="gridView"
    [selectable]="selectableSettings"
    [height]="317"
    [kendoGridSelectBy]="getWholeItemRow"
    [selectedKeys]="mySelection"
    (selectedKeysChange)="onSelectedKeysChange($event)"
    (remove)="confirmDeleteItemFromGrid($event)">
      <ng-template
      kendoGridToolbarTemplate>
        <button
        [disabled]='mySelection.length === 0'
        mat-flat-button
        class="btn-danger btn-sm"
        (click)="removeSelectedItems()">Remove selected items</button>
      </ng-template>
      <kendo-grid-checkbox-column width="15" showSelectAll="true" [columnMenu]="false" >
          <ng-template kendoGridHeaderTemplate>
              <input class="k-checkbox" id="selectAllCheckboxId" kendoGridSelectAllCheckbox
                  [state]="selectAllState"
                  (selectAllChange)="onSelectAllChange($event)">
              <label class="k-checkbox-label"
               for="selectAllCheckboxId"></label>
          </ng-template>
      </kendo-grid-checkbox-column>
    ...
</kendo-grid>

TS:

export class ImagesGridComponent implements OnInit{

  @Input() captures: Array<Image>;
  @Input() positionSection: number;
  selectedImages: any[] = [];
  public selectAllState: SelectAllCheckboxState = 'unchecked';
  public mySelection: any[] = [];
  public gridView: GridDataResult;

  public selectableSettings: SelectableSettings = {
    enabled: false,
    checkboxOnly: false,
    mode: 'multiple'
  };

  constructor(){}

  ngOnInit(): void {
    this.loadItems();
  }

Function that returns the object stored in the row. Used for [kendoGridSelectBy]:

  getWholeItemRow(context: RowArgs) {
    return context.dataItem;
  }

Function that should fired when the [selectedKeys] collection is updated: (NOT WORKING)

public onSelectedKeysChange(e) {
  const len = this.mySelection.length;

  if (len === 0) {
      this.selectAllState = 'unchecked';
  } else if (len > 0 && len < this.captures.length) {
      this.selectAllState = 'indeterminate';
  } else {
      this.selectAllState = 'checked';
  }
}

Function used when the header checkbox is checked/unchecked:

public onSelectAllChange(checkedState: SelectAllCheckboxState) {
  if (checkedState === 'checked') {
      this.mySelection = this.captures;
      this.selectAllState = 'checked';
  } else {
      this.mySelection = [];
      this.selectAllState = 'unchecked';
  }
}

Used to fill the grid:

  loadItems() {
    this.gridView = {
      data: this.captures,
      total: this.captures.length
    };
  }
}

Thank you.

UPDATE:

I edited the selectableSettings object and now works:

public selectableSettings: SelectableSettings = {
    enabled: true,
    checkboxOnly: true,
    mode: 'multiple'
  };

Answer 1

Add below properties in your kendo grid element:

HTML:

<kendo-grid [selectable]="selectableSettings" [kendoGridSelectBy]="onSelectedKey" [selectedKeys]="selectedData">
        <kendo-grid-checkbox-column showSelectAll="true" [columnMenu]="false">
        </kendo-grid-checkbox-column>
</kendo-grid>

TS:

public setSelectableSettings(): void {
  this.selectableSettings = {
    checkboxOnly: false,
    mode: 'multiple',
  };
}

// This method is used to get the checked record data 
public onSelectedKey(context: RowArgs): any {
  return context.dataItem;
}

Kendo API reference:

https://www.telerik.com/kendo-angular-ui/components/grid/api/CheckboxColumnComponent/

Answer 2

It seems that you have provided the checkbox with the wrong class. Instead of k-checkbox you are using k-radio . Change it as shown below,

<input type="checkbox" class="k-checkbox" id="selectAllCheckboxId"
    kendoGridSelectAllCheckbox [state]="selectAllState"
    (selectAllChange)="onSelectAllChange($event)"/>

Answer 3

It's needed to be an input html tag. For me work.