Progress® Kendo UI® for Angular Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 09 Jun 2020 14:13 by ADMIN
Girija
Created on: 24 Jul 2018 06:11
Category: DropDownList
Type: Feature Request
1
binding to object in dropdownlist
find below appcomponent.html code: <kendo-dropdownlist [defaultItem]="defaultYear"
 [data]="budgetYears"
[valueField]="budgetYears.value">
</kendo-dropdownlist>

and in appcomponent.ts file:
public budgetYears: Array<{ value: number }> = [
        { value: 2019 },
        { value: 2020 },
        { value: 2021 },
        { value: 2022 },
        { value: 2023 },
        { value: 2024 },
    ];

as mentioned above I have provided the mentioned codes but I am not getting the binded values. Instead of that I am getting [object Object]. Why it is so and where I am doing mistake. Please provide me a solution for this. Thanks
1 comment
ADMIN
Martin
Posted on: 09 Jun 2020 14:13

Hi Girija,

Thank you for the provided code snippet.

In order to bind the DropDownList to complex object data, the textField, and valueField options should be set to a field from the bound collection e.g:

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <p>T-shirt size:</p>
        <kendo-dropdownlist
            [data]="listItems"
            [textField]="'value'"
            [valueField]="'value'"
        >
    </kendo-dropdownlist>
    </div>
  `
})
export class AppComponent {
    public listItems: Array<{ value: number }> = [
        { value: 1 },
        { value: 2 },
        { value: 3 }
    ];
}

For more details check the following article:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/data-binding/#toc-arrays-of-complex-data

Regards,
Martin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Create an account Log In
View
Type
Status
Category