Kendo Grid - databound to boolean rendered as checkbox?

1 Answer 2984 Views
General Discussions
BitShift
Top achievements
Rank 1
Veteran
BitShift asked on 18 Apr 2019, 07:38 PM

So Im looking at this example

https://txu6rb.run.stackblitz.io

How can I bind the "Discontinued" field to checkbox column?  Shouldn't just be all that's needed?
eg.  specifying the field?

<kendo-grid-checkbox-column showSelectAll="true" field="Discontinued" width="25"></kendo-grid-checkbox-column>

When I make that change, even through some of the Product's data has Discontinued as true, no checkboxes are displayed checked.

What am I missing?

 

 

1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 22 Apr 2019, 07:54 AM
Hi Randal,

The Kendo Grid checkbox column is a built-in UI exclusively created for selection purposes only:

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

It is not bound to any data item property.

To render the boolean values in a Grid column, bound to a boolean data item field via the column component's field input, as a checkbox, you can use the Grid cell templates:

https://www.telerik.com/kendo-angular-ui/components/grid/#toc-basic-usage

The checkboxes can also be active and actually edit the Grid data items when toggled:

https://stackblitz.com/edit/angular-sljbg5-hgmkk7?file=app/app.component.ts

To combine the binding, editing, and the Grid selection, you can also use the rowSelected callback to programmatically select all "Discontinued" items:

https://stackblitz.com/edit/angular-sljbg5-fwwpgd?file=app/app.component.ts

Using a similar approach with a checkbox-column (alongside the rowSelected) callback is also possible alongside handling the selectionChange event, and mutating the selected/deselected data items' boolean field accordingly, e.g.:

https://stackblitz.com/edit/angular-rbjsqs?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
BitShift
Top achievements
Rank 1
Veteran
Answers by
Dimiter Topalov
Telerik team
Share this question
or