How to handle Kendo grid checkbox event in Angular

Question

I need to display status column value. when only the checkbox checked row in kendo grid angular. here the code

 <kendo-grid [data]="gridData" [navigable]="true" [selectable]="{ mode: 'single' }">
          <kendo-grid-column field="Discontinued" title="" width="20">
            <ng-template kendoGridCellTemplate let-dataItem>
                <input type="checkbox" (click)="toggle(dataItem, 'Discontinued')" [checked]="dataItem.Discontinued"/>
            </ng-template>
        </kendo-grid-column>
        
        <kendo-grid-column field="ProductName" title="Units" [width]="30"></kendo-grid-column>
          
           <kendo-grid-column field="Discontinued" title="status" [width]="30"></kendo-grid-column>
     </kendo-grid>

TS:

  public toggle(dataItem: any, field: string): void {
  
   dataItem[field] =  'primary';
  }

above primay value need to given statically. when unchecked the status value still showing the primary value. I need display status value only checked when unchecked don't display any value. please help me

code sample here

Giannis Giannis · Accepted Answer · 2021-03-23T12:20:23

In order to keep it simple and follow the way you implemented it, try to change the toggle method like that:

public toggle(dataItem: any, field: string): void {
  if (dataItem[field] === 'primary') {
    dataItem[field] =  '';
  }
  else {
    dataItem[field] =  'primary';
  }
}

Please find the updated code and result

How to handle Kendo grid checkbox event in Angular

1 Answers