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

2 posts, 0 answers
  1. Kevin
    Kevin  avatar
    5 posts
    Member since:
    Jun 2012

    Posted 19 Jul Link to this post

    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"


    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) {

    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) {
                        if (carEntry.car.CAR_TXT_ID !== undefined) {

  2. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    96 posts

    Posted 22 Jul Link to this post

    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


    - 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:


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

    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top