Best Ways to Bind Complex DDL Using Kendo Angular2 [How To]

“How to Bind to Arrays of Complex Data in DropDownList using Angular 2”?

The “Kendo UI Angular 2 DropDownList” is a form component and used binds the data list and chooses a single predefined value as per you from a dropdown list.

When we use complex objects to bind DropDownList, In that case we will need to define properties (text-field and value-field). Also it will extract the text and value’s values from the selected DDL item. This process will set the selected DDL’s text and value.

Stayed Informed – Live demo Plunker

Stayed Informed – Angular 2 Step by Step Tutorials and Examples

Example as,

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <p>Select Item:</p>
        <kendo-dropdownlist
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
        >
    </kendo-dropdownlist>
    </div>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "1001-Item 1", value: 1 },
        { text: "1002-Item 2", value: 2 },
        { text: "1003-Item 3", value: 3 },
        {text: "1004-Item 4", value: 4 }
    ];
}

References,

http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/

http://docs.telerik.com/kendo-ui/third-party/angular2

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2