Intermittent Angular Data Binding Problems

[Russell]

In an Angular 1.4.8 application I am using several similarly configured Dropdowns and Combo Boxes (version 2015.3.1111) that will intermittently fail to initialize existing numeric values correctly and result in Angular form validation errors. I am only seeing this behavior in IE 11, maybe 1 out of 10 times the form loads. The data source in each case is the same $http service call (differing only by parameter) to another local machine located on the same network subnet.

Below is a sample of the markup and controller code, and attached are screenshots that show what is in the DOM when loading fails and succeeds. Note in the screenshots how in the failed view option value 27 (the pre-existing value) is marked as selected, while in the success screenshot, value 29, the pre-existing value is not a selected option value. I have seen this symptom repeatedly when examining the output when this condition occurs. In the UI screenshot, the "Description of Duties" label is showing an error style, despite the fact that the DDL is displaying the correct value.

Please advise how this behavior could be eliminated. I have tried k-ng-delay on the options elsewhere in the codebase without success, and would prefer not to use primitives since it would require substantial modifications to the application, and this works already most of the time (and apparently always in Chrome).

 

//Duty Description DDL configuration
vm.dutyOptions = {
   dataValueField: "dynamicListID",
   dataTextField: "dynamicListValue",
   dataSource: new kendo.data.DataSource({
      type: "json",
      transport: {
         read:
            function (e) {
               var listId = myConstants[0].dutyDescriptionListNameID;
               itrsDataService.getDynamicListData(listId)
                  .then(function (data) {
                     e.success(data);
                  });
            }
      }
   }),
   optionLabel: " ",
   autoBind: true,
};

 

<div class="form-group" ng-class="{'has-error': insVM.form.dutyDescription.$invalid, 'required' : insVM.insurance.fundingSourceID === 1}">
<label for="dutyDescription"
       class="col-sm-3 control-label">Description Of Duties
</label>
<div class="col-sm-7">
  <select kendo-drop-down-list
          name="dutyDescription"
          ng-required="insVM.insurance.fundingSourceID === 1"
          k-options="insVM.dutyOptions"
          ng-model="insVM.insurance.dutyDescription"
          style="width:100%" />
<div class="help-block"
     ng-messages="insVM.form.dutyDescription.$error"
     ng-if="insVM.form.dutyDescription.$touched &&
        insVM.form.dutyDescription.$invalid">
     <div ng-messages-include="app/shared/validationMessages.html"></div>
</div>
</div>
</div>

[Georgi Krustev]

Hello Russell,

The described issue is really strange. For some reason, the value of the underlying SELECT element causes a form errors. Could you try bind the SELECT without using Kendo widget? Thus we will be able sure that the problem is caused by the widget itself. If the issue appears only with Kendo widget, then we will need a repro demo. Thus we will be able to further investigate the erroneous behavior locally and find a resolution much faster.

Looking forward to hearing from you.

Regards,
Georgi Krustev
Telerik

 

 

[Russell]

Hello, thanks for your reply. As you can imagine from my problem description, it will probably be very difficult to create a repro version of the problem since it is a full-blown Enterprise application that only fails periodically in our TEST environment. Do you think any of the enhancements in the 2016 Q1 release could possibly have any affect on the performance?