Kendo UI DropdownList dataSource

Question

Is there any way I can set a kendo ui dropdowns data source to a property of an object? Example.

If I have following object

Person:{ FirstName: 'Nilesh', Gender: 'Male', GenderList:['Male','Female'] }

If I have a form in which I show a text box for the first name and a dropdownlist for the gender, I want to bind the kendo ui dropdownlist to the GenderList Property of the object.

I want to do this in angularjs

Is this even possible? If yes how can we get this to work?

I used following html to render the kendodropdown list.

<input kendo-drop-down-list k-data-source="Person['GenderList']" />

but this does not work.

Any help appreciated.

Answer 1

I have tested your code and this works for me:

In your controller:

$scope.Person = {
        FirstName: 'Nilesh',
        Gender: 'Male',
        GenderList: ['Male', 'Female']
    }

In your html:

<input kendo-drop-down-list k-data-source="Person['GenderList']" />

The only difference is var Person is declarate into $scope. This is necessary for angular data-binding.