CODEWITHSUNDEEP
javascriptangulardrop-down-menukendo-ui
Nicolas
Nicolas

Reputation: 4756

Angular 2 - Kendo UI Dropdown default value

I'm trying to create a dropdownlist using Kendo UI, it's working great except for having a default selected value when the screen loads.

according to their documentation my code should look like this:

HTML:

<kendo-dropdownlist formControlName="description"
                    [data]="definitionData.Languages"
                    [(ngModel)]="languageValue"
                    [textField]="'Value'"
                    [valueField]="'Key'"
                    [value]="2"
                    [valuePrimitive]="true">
</kendo-dropdownlist>
<span class="left col-xs-6">
    <input type="text" id="descriptionField" class="form-control" [value]="getValue(descriptionForm.controls.description.value)" #descriptionField (blur)="updateDescriptionValue(descriptionField.value, languageValue)" />
</span>

COMPONENT:

public descriptionForm: FormGroup = new FormGroup({
    description: new FormControl()
});

My dropdown works, but the default selected value is blank when I load the page, and it should be the object with Key: 2

note: I don't want to use [defaultItem] since It will just duplicate the item, meaning it will be in the dropdown list 2 times.

I've tried numerous things, but I can't figure out what I should do!

Thanks in advance

Upvotes: 4

Views: 9832

Answers (1)

Jarosław Kończak
Jarosław Kończak

Reputation: 3407

You should choose between value and ngModel binding. From documentation:

The DropDownList does not support the simultaneous usage of the value property and the ngModel value binding.

Solution with value property:

  1. Delete ngModel from HTML.
  2. Bind to valueChange event and set value in your model.

HTML:

<kendo-dropdownlist formControlName="description"
                [data]="definitionData.Languages"
                (valueChange)="handleValue($event)"
                [textField]="'Value'"
                [valueField]="'Key'"
                [value]="2"
                [valuePrimitive]="true">
</kendo-dropdownlist>

COMPONENT:

handleValue(value) {
    this.languageValue = value;
}

Solution with ngModel property:

  1. Delete value from HTML.
  2. Set default value in your model.

HTML:

<kendo-dropdownlist formControlName="description"
                [data]="definitionData.Languages"
                [(ngModel)]="languageValue"
                [textField]="'Value'"
                [valueField]="'Key'"
                [valuePrimitive]="true">
</kendo-dropdownlist>

COMPONENT:

constructor(){
    this.languageValue = 2;
}

Upvotes: 8

Related Questions