CODEWITHSUNDEEP
angularfiltercomboboxkendo-ui-angular2
Dan
Dan

Reputation: 125

Kendo UI for Angular 2+ - combobox filter (display loaded information on init)

I'm loading from database a record (Organization) which (could) have a parent (parent ID); when I'm displaying & editing the information (using the same form with Reactive forms) I'm using kendo-dropdown with filtering capabilities; I'm loading its initial state (on ngOnInit). Though value is correctly set in combo, text does not appear.

component.html

<kendo-combobox
                    #orgParentId
                    formControlname="parentId"
                    [data]="organizationsLike"
                    [textField]="'name'"
                    [valueField]="'id'"
                    [filterable]="true"
                    (filterChange)="handleFilter($event)"
                    [placeholder]="'Search parent...'"
                    [suggest]="true"
                    [valuePrimitive]="true"
                    (selectionChange)="parentIdSelChanged($event)"
                >
           </kendo-combobox>

component.ts -> ngOnInit(): void

if (this.organization && this.organization.parentId) {
        this.organizationService.getOrganization(
            this.organization.parentId,
            r => this.organizationsLike = [r],
            null,
            () => {
                if (this.organizationsLike){
                    this.organizationForm.controls['parentId'].setValue(this.organizationsLike[0].id.toString());
                    // this.orgParentId.value = this.orgParentId.selected = this.organizationsLike[0].id;                         
                    // this.orgParentId.text = this.organizationsLike[0].name;
                    console.log('org like: ', this.orgParentId.text, this.orgParentId.value, this.organizationsLike[0].id, this.organizationForm.value);
                    // this.parentIdSelChanged(this.organizationsLike[0]);
                }
            }
        );
    }

What am I doing wrong?

Upvotes: 0

Views: 1006

Answers (1)

cyberpirate92
cyberpirate92

Reputation: 3186

Just add a ngModel to your combobox 

<kendo-combobox
    #orgParentId
    formControlname="parentId"
    [data]="organizationsLike"
    [textField]="'name'"
    [valueField]="'id'"
    [filterable]="true"
    (filterChange)="handleFilter($event)"
    [placeholder]="'Search parent...'"
    [suggest]="true"
    [valuePrimitive]="true"
    (selectionChange)="parentIdSelChanged($event)"
    [(ngModel)]="selectedOption">
</kendo-combobox>

And set the model to one of your combo box options

selectedOption = JSON.parse(JSON.stringify(this.organizationsLike[0]));

Demo - Plunkr

UPDATE: Based on the comments,

If you are using reactive forms, you can just specify the initial value as the first parameter of the form control constructor.

Example:

public listItems: string[] = [ {name: "option1", id: 1}, {name: "option2", id: 2}, {name: "option3", id: 3} ];
public sampleFormGroup: FormGroup = new FormGroup({
     myComboBox: new FormControl(this.listItems[0]) 
                               // ^^^^^^^^^^^^^^^^ INITIAL VALUE
});

And whatever value you have specified there will be displayed in the combobox initially.

Demo - Plunk (Using reactive forms)

Hope this helps

Upvotes: 1

Related Questions