Reusing Multiselect Does Not Toggle Checkbox

[David]

I am following the Rendering Item Checkboxes documentation. But I'm running into a problem where when I try to reuse the form and existing controls, the multiselect displays the correct tags and the correct items are highlighted when you open it, but the checkbox inputs are not checked.

This is my HTML:

<ng-container *ngSwitchCase="'mulitselect'">
    <kendo-multiselect [formControlName]="col.ControlName"
                       [data]="col.Extras.Data"
                       [textField]="col.Extras.TextField"
                       [valueField]="col.Extras.ValueField"
                       [valuePrimitive]="true"
                       [autoClose]="false">
        <ng-template kendoMultiSelectItemTemplate
                     let-dataItem>
            <input type="checkbox"
                   class="k-checkbox"
                   [checked]="isItemSelected(col.Extras.Data, dataItem, col.Extras.ValueField)">
            <label class="k-checkbox-label">{{ dataItem[col.Extras.TextField] }}</label>
        </ng-template>
      </kendo-multiselect>
</ng-container>

 

This is my isItemSelected method:

isItemSelected(data: any, dataItem: any, valueField) {
    return data.indexOf(item => item[valueField] === dataItem[valueField]) > -1;
}

 

This how I'm reusing the form, where control named Foo represents the multiselect:

showEditForm(record?: ITestInterface) {
    this.form.disable();
    this.form.reset(record); // Patch in new value

    if (record) {
        this.form.get('Foo').setValue([1, 3]);
    }
}

 

Attached is a screenshot demonstrating what I mean.

[David]

Sorry, I forgot the attachment.

[Georgi]

Hello David,

I've tried to recreate your use case as closely as possible in the following example.

The problems I found were:

• The isItemSelected method used indexOf (which accepts a primitive value) instead of findIndex, which accepts a callback function. However I ended up using indexOf still, because the value of the form control was in fact an array of primitive values.
• The data you passed to that method was the list of all possible values (col.Extras.Data - contains every value), so essentially any of the values could be found there. And every box is always checked. Instead, we need to search the value of the form control.

Please do let me know if that works like you expect it to.

Regards,
Georgi
Progress Telerik