CODEWITHSUNDEEP
angularkendo-ui
Tom
Tom

Reputation: 8681

default value of kendo drop down not being set in angular

I have bound data to the kendo-dropdown list in angular 7 application and now trying to set the default value. I have set the defaultItem property to the id same as the valuefield but it doesnt seem to show the default value. It is showing the text FundClassId instead.

Markup

 valueField="FundClassId" defaultItem = "FundClassId"  (valueChange)="flashClassChanged($event)"></kendo-dropdownlist>

Component

fundclassSelected: any;

JSON Structure

"[{"FundClassId":13714,"FundClass":"Class D"},{"FundClassId":13717,"FundClass":"Class B"},{"FundClassId":13713,"FundClass":"Class A"},{"FundClassId":13716,"FundClass":"Class B1"},{"FundClassId":13715,"FundClass":"Class C"}]"

Upvotes: 1

Views: 4597

Answers (1)

Lia
Lia

Reputation: 11982

your list is an array of objects but you are trying to set a string as default value that makes it wrong, set the default value like one of your list items:

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist 
    [data]="newData" 
    textField="FundClassId"
    valueField="FundClassId"
    [defaultItem]="defaultItem"
    >
    </kendo-dropdownlist>
  `
})
export class AppComponent {
  public newData = [{"FundClassId":13714,"FundClass":"Class D"},{"FundClassId":13717,"FundClass":"Class B"},{"FundClassId":13713,"FundClass":"Class A"},{"FundClassId":13716,"FundClass":"Class B1"},{"FundClassId":13715,"FundClass":"Class C"}];
  defaultItem = this.newData[0]; //or defaultItem = {"FundClassId":"default item ...","FundClass":"Class D"};
}

DEMO.

Upvotes: 1

Related Questions