Angular Kendo - Issue with adding cascading opts to dropdownlist

[erikschlegel]

I've run into an issue with adding the cascading options to my existing angularized kendo dropdownlists. The cascading doesn't seem to be functional when adding the k-cascade options. When I try the non-angular version of Kendo dropdownlists the cascading works as expected. I've included both the angular and non-angular version below. Any suggestions would be greatly appreciated.

in my angular controller I have the data opts defined as such

$scope.dataOpts1 = [
        { name: "Parent1", id: 1 },
        { name: "Parent2", id: 2 }];
$scope.dataOpts3 = [
            { name: "Child1", id: 1, parentId: 1 },
                { name: "Child2", id: 2, parentId: 2 },
            { name: "Child3", id: 3, parentId: 1 },
            { name: "Child4", id: 4, parentId: 2 }];

Angular version which doesnt work

  <input kendo-drop-down-list ng-model="parent"
                                k-data-text-field="'name'"
                                k-data-value-field="'id'"
                                k-data-source="dataOpts1"/>
                        <input kendo-drop-down-list
                                k-cascade-from="parent"
                                k-cascade-from-field="'parentId'"
                                ng-model="child"
                                k-data-text-field="'name'"
                                k-data-value-field="'id'"
                                k-data-source="dataOpts3"/>
                    

Non-Angular which cascading is functional

                      
                        
                        
                            $("#parent2").kendoDropDownList({
                                dataTextField: "name",
                                dataValueField: "id",
                                dataSource: [
                                    { name: "Parent1", id: 1 },
                                    { name: "Parent2", id: 2 }
                                ]
                            });
                 $("#child2").kendoDropDownList({
                            cascadeFrom: "parent2",
                            cascadeFromField: "parentId",
                            dataTextField: "name",
                            dataValueField: "id",
                            dataSource: [
                                { name: "Child1", id: 1, parentId: 1 },
                                { name: "Child2", id: 2, parentId: 2 },
                                { name: "Child3", id: 3, parentId: 1 },
                                { name: "Child4", id: 4, parentId: 2 }
                            ]
                        });
  </tr>

[burkeholland]

Could you replicate this for us in a Plunker? http://plnkr.co/edit/eXdjWUvePJnsAVfpckW2?p=preview

[erikschlegel]

Here's the plunker http://plnkr.co/edit/i5ybFb7hYcQhEotVULtA

[mishoo]

You have to use id rather than ng-model, just like you do with plain Kendo. Here's the fixed plunker: http://plnkr.co/edit/Ek7UIsOdDHBwMMb0L9vE?p=preview

Changes were: id="parent" instead of ng-model="parent" in the first combo, and k-cascade-from="'parent'" in the second (I surrounded the word with single-quotes).

[erikschlegel]

Thank you and much appreciation for the prompt response, which I now have the cascading feature working in Angular.

[burkeholland]

👍