Kendo k-checkbox class in a Reactive Form (external form editing)

[James]

Hi,

I'm using the External Editing example:

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

and I have a checkbox, but I want the checkbox to be k-checkbox style.

https://angular-q8u3nm.stackblitz.io

But if you Add and bring up the external form, you can see that the checkbox is styled right but is disabled.

Is it not possible to use Kendo Checkbox in a reactive form? This documentation suggests they may not supported after all:

https://www.telerik.com/kendo-angular-ui/components/forms/forms-support/

Any way to make this work?

James

[Dimiter Topalov]

Hello James,

Using the Kendo UI checkboxes within a reactive form is possible. The provided Stackblitz link could not be opened on our end (you can use the whole browser address bar link as opposed to the one generated in the right-hand side Stackblitz frame):



https://stackblitz.com/edit/angular-ahkbqh-s2zx4p?file=app/edit-form.component.ts

I edited the Grid external form editing demo to include a Kendo checkbox in the place of the regular HTML one.

The specifics, related to using the Kendo UI checkbox are the following - the Input element needs to have the "k-checkbox" class applied, and the associated label needs the k-checkbox-label class. Furthermore, the DOM Label element needs to come immediately after the Input element, and the input's "id" attribute needs to match the Label's "for" attribute:

<input id="discontinued" class="k-checkbox" type="checkbox" formControlName="Discontinued" />
                      <label for="discontinued" class="k-checkbox-label">Discontinued product</label>

This is necessary as the Kendo theme, responsible for the custom styling of the label (as the Input element with .k-checkbox class is hidden, and the corresponding label is styled accordingly) has selectors that target the "k-checkbox-label" label element after a "k-checkbox" input element.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[James]

Apologies it should have been be https://stackblitz.com/edit/angular-q8u3nm

Thanks Dimiter, that works great thanks.