Dropdown in AngularJS resets to default value after setting value and triggering select

[Kevin]

I have an issue with restoring the selection in a Kendo dropdownlist after my application loads data from the database. When I set a breakpoint after restoring the selection, I can see that the dropdownlist has been set properly to the value to restore. However, when I continue after the breakpoint, the dropdownlist resets to its default value. What is causing the dropdown to reset?

We are using Kendo UI v2016.1.322, Internet Explorer 11.0.9600.18314, and Windows Server 2008 R2 Enterprise.

This is the markup for the dropdownlist :

<div class="panel panel-default" id="carEntriesPanel"
     ng-repeat="carEntry in carEntries[selectedRouteIndex]">

    <select class="form-control" kendo-drop-down-list k-options="kdCarTextOptions"
     id="{{'carTextDropdown-' + $index}}" ng-model="carEntry.carTextSelected.id"
   </select>  

</div>

These are the options and data source:

            $scope.kdCarTextOptions = {
                optionLabel: 'Please Select',
                dataSource: $scope.carTextDropDownDataSource,
                dataTextField: 'name',
                dataValueField: 'id',
                select: $scope.onSelect
            };

            $scope.carTextDropDownDataSource = new kendo.data.DataSource({
                transport: {
                    read: function (options) {
                            options.success($scope.carTexts[$scope.selectedRouteIndex]);
                    }
                }

This is the onSelect method:

           $scope.onSelect = function (e) {
                var dataItem = this.dataItem(e.item);
                $scope.carEntries[$scope.selectedRouteIndex][$scope.carIndex].carTextSelected.id = dataItem.id;
                $scope.carEntries[$scope.selectedRouteIndex][$scope.carIndex].carTextSelected.name = dataItem.name;
            };
        }

This is the method that restores the dropdown selection. By setting breakpoints, I could see that the dropdownlist does show the restored value, and onSelect is called after the select is triggered. But when I continue after the trigger, the dropdownlist resets to its default value.

            function updateCarTextDropdown(carIndex, carEntry) {

                var dropdown = angular.element('#carTextDropdown-' + carIndex).data('kendoDropDownList');
                if (dropdown) {
                    dropdown.dataSource.read();
                    if (carEntry.car.CAR_TXT_ID !== undefined) {
                        dropdown.value(carEntry.car.CAR_TXT_ID.toString());
                        dropdown.trigger('select');
                    }
            }

[Alex Hajigeorgieva]

Hello Kevin,

Please accept my apology for the delay in responding.

To be able to provide you with a definitive answer, I need some further information which does not become evident from the snippet provided. ($scope.carTexts, $scope.carEntries, carEntry.car.CAR_TXT_ID)

Below are some suggestions that may point you in the right direction:

- check what is the value of "carEntry.car.CAR_TXT_ID.toString()".
- note that the Kendo UI DropDownList select() method  alone does not trigger a change event and neither does the value() method

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-select
http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-value  

- If you wish to load preselected Items, the below documentation How To article shows an approach that may be useful. It takes advantage of the dataBound event:

http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/preselect-items

If neither of these suggestions proves helpful, could you please provide a small runnable sample so I can advise further.

Regards,
Alex
Telerik by Progress