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'
  };

Creative Learner Creative Learner · Accepted Answer · 2019-11-22T11:05:50

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/

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

2 Answers