MCCB - Not Rendering List Like Standard CB

[Keith]

Good day!

I have a ComboBox (CB) residing in a FormField that works just fine.  I wanted to convert it to the MultiColumnComboBox (MCCB) to show a couple of extra fields.  I don't have time today, maybe over the weekend, to create a small, self contained example.  Yet, here are the two similar sections and their results:

CB

<kendo-formfield [showHints]="'always'" [showErrors]="'always'">
    <kendo-label [for]="'companyProfile'" text="Company Profile: "></kendo-label>
    <kendo-combobox ngDefaultControl [data]="companyProfiles"
                                [formControlName]="'companyProfile'"
                                [textField]="'companyName'"
                                [valueField]="'id'"
                                [filterable]="true"
                                (filterChange)="companyProfilesFilter($event)">
    </kendo-combobox>
    <kendo-formerror>
        <div *ngIf="formGroup.get('companyProfile').errors && formGroup.get('companyProfile').errors.required">
            Company profile is required.
        </div>
    </kendo-formerror>
</kendo-formfield>

MCCB

<kendo-formfield [showHints]="'always'" [showErrors]="'always'">
    <kendo-label [for]="'companyProfile'" text="Company Profile: "></kendo-label>
    <kendo-multicolumncombobox ngDefaultControl [data]="companyProfiles"
                                [formControlName]="'companyProfile'"
                                [textField]="'companyName'"
                                [valueField]="'id'"
                                [filterable]="true"
                                (filterChange)="companyProfilesFilter($event)">
        <kendo-combobox-column [field]="'companyName'"
                                [title]="'Name'"
                                [width]="250">
        </kendo-combobox-column>
        <kendo-combobox-column [field]="'companyId'"
                                [title]="'Profile Name'"
                                [width]="250">
        </kendo-combobox-column>
    </kendo-multicolumncombobox>
    <kendo-formerror>
        <div *ngIf="formGroup.get('companyProfile').errors && formGroup.get('companyProfile').errors.required">
            Company profile is required.
        </div>
    </kendo-formerror>
</kendo-formfield>

 

MCCB Without ngDefaultControl

As you can see I added the ngDefaultControl to the control after getting the following error on the MCCB without it:

ERROR Error: No value accessor for form control with name: 'companyProfile'
    at _throwError (forms.js:3576)
    at setUpControl (forms.js:3400)

 

By adding it, I did not get a javascript error any longer, but with no dropdown content as seen above.

Anything obvious to someone?

Peace,
Keith

 

[Dimitar]

Hello Keith,

The ngDefaultControl directive is usually used to substitute for a missing ControlValueAccessor implementation. The MCCB, however, does implement the ControlValueAccessor interface and is provided as an NG_VALUE_ACCESSOR. So it should work fine in forms without any further tweaking. Here's a working example from our docs.

I also couldn't spot any configuration issues in the provided code. So, I'd have to ask you to either provide a StackBlitz example like the one I've shared, or prepare a simplified zipped project and send it over, so I can inspect the problematic code. Thanks in advance!

Looking forward to your reply.

Regards,
Dimitar
Progress Telerik