k-ng-model is not updated on first data load

[Radio Vaticana]

Hi,
I really appreciate your efforts to integrate event better AngularJS and I love flexibility about binding included in last kendoui release... I was waiting for it.

With settings below SelectedProductId contains the value of ProductID property of selected data item.
With k-value-primitive="true" and k-ng-model=".." I also have in SelectedProductId the same data type of ProductID property (number, string, object, etc.) and this is important for me.

<select kendo-drop-down-list="remote"
        k-data-text-field="'ProductName'"
        k-data-value-field="'ProductID'"
        k-data-source="productsDataSource"
        k-ng-model="SelectedProductId" k-value-primitive="true"
        style="width: 200px"></select>

The issue happen on first load, because after dropdownlist loaded data the variable SelectedProductId is not set to the right value.
Only selecting a new value from list, SelectedProductId is set to the right value.

I attached a simple test to reproduce issue.

Thanks

[Georgi Krustev]

Hello,

In general, the DropDownList widget is designed to select first item automatically. Because there is no user interaction, the change event is not raised (this is how regular SELECT element works) and thus the model is not updated. We will improve this behavior in some of our next release (find more information here). For now you will need to trigger change event manually in order to notify for the change:

        $scope.dataBound = function(e) {
            e.sender.trigger("change");
        };

Check the updated demo.

Regards,
Georgi Krustev
Telerik

 

 

[Radio Vaticana]

Ok, for now, I will trigger change event.

Thank you for your suggestion

[Luc]

Hi Georgi,

I tried your workaround with the version "2015.1.327" and it doesn't. I get the following exception:
Could you confirm that this bug will be fixed in the next release?
Thanks,
Luc

Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.5/$rootScope/inprog?p0=%24apply
    at Error (native)
    at http://127.0.0.1:9000/bower_components/angular/angular.min.js:6:416
    at l (http://127.0.0.1:9000/bower_components/angular/angular.min.js:117:306)
    at k.$get.k.$apply (http://127.0.0.1:9000/bower_components/angular/angular.min.js:125:318)
    at null.<anonymous> (http://127.0.0.1:9000/components/kendo-ui/js/kendo.all.min.js:54:4628)
    at i.extend.trigger (http://127.0.0.1:9000/components/kendo-ui/js/kendo.all.min.js:9:6374)
    at k.$scope.onContentTypeDropDownDataBound (http://127.0.0.1:9000/scripts/tagging/tagIndexView.js:289:22)
    at fb.functionCall (http://127.0.0.1:9000/bower_components/angular/angular.min.js:198:112)
    at http://127.0.0.1:9000/components/kendo-ui/js/kendo.all.min.js:54:12403
    at k.$get.k.$eval (http://127.0.0.1:9000/bower_components/angular/angular.min.js:125:120)

[Luc]

Hi Georgi,
I tried the same workaround and it doesn't work with the version 2015.1.327. Could you confirm me that this bug will be fixed in the next release?
Thanks,
Luc MOULIN

Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.5/$rootScope/inprog?p0=%24apply
    at Error (native)
    at http://127.0.0.1:9000/bower_components/angular/angular.min.js:6:416
    at l (http://127.0.0.1:9000/bower_components/angular/angular.min.js:117:306)
    at k.$get.k.$apply (http://127.0.0.1:9000/bower_components/angular/angular.min.js:125:318)
    at null.<anonymous> (http://127.0.0.1:9000/components/kendo-ui/js/kendo.all.min.js:54:4628)
    at i.extend.trigger (http://127.0.0.1:9000/components/kendo-ui/js/kendo.all.min.js:9:6374)
    at k.$scope.onContentTypeDropDownDataBound (http://127.0.0.1:9000/scripts/tagging/tagIndexView.js:289:22)
    at fb.functionCall (http://127.0.0.1:9000/bower_components/angular/angular.min.js:198:112)
    at http://127.0.0.1:9000/components/kendo-ui/js/kendo.all.min.js:54:12403
    at k.$get.k.$eval (http://127.0.0.1:9000/bower_components/angular/angular.min.js:125:120)

[Georgi Krustev]

Hello Luc,

The described error is thrown, because the widget now allows to de-select its values since Q1 2015 release. Hence, the first cascade event will be raised when the widget does not have a selected data item and the code used in the cascade event handler will throw a JavaScript exception.
You will need to modify the code to handle this possible scenario when widget does not have selected data item:

$scope.cascade = function(e) {
      $scope.$apply(function() {
        var dataItem = e.sender.dataItem();
        if (dataItem) { //Check if dataItem is defined
          $scope.valueShouldBe = [e.sender.options.dataValueField];
        } else {
          $scope.valueShouldBe = null;
        }
      });
};

The #312 issue will be solved for the upcoming service pack (Q1 2015 SP1) and it will resolve the out-of-sync issue between model and the widget value.

Regards,
Georgi Krustev
Telerik

 

 

[Tim]

Using q3 2015 build (with angular 1.4.6) I have found if you change the model value for a dependent cascade drop-down it will eventually stop updating and not be in sync with the model (this only seems to happen for the 2nd cascade input). I see the correct value in my model (using a watch) and it has the value on the drop-down relative to the cascade from but the drop-down does not display/select the matched value. It's not the first value, just the last value from the same cascade. It's a long test case but the problem exists. (code driven value change (from user selection on a grid in my case) basic test: root 1/ cascade 2, root 2/cascade 3, root 2/cascade 4, root 1/cascade 2, root2/cascade 4, root2/cascade 3) The last cascade root 2 will still show cascade 4 even though the model and watch expression below shows correct ID for cascade 3.

Anyhow, is there a way to force the drop-down to re-​evaluate its selected value from the model? (the drop down list is correct, just not the selected value)

Here is my watch expression I'd like to alter (the function is called correctly and ready to message the dropdown to re-pull the correct value from the model):

$scope.$watch('dsActiveRow.portfolioId', function(newv, oldv) {
    console.log('watch called on portid old/new', oldv, newv);
    if ($scope.dsActiveRow) {
        console.log('ask the drop down to reload from model');
    }
});

[Tim]

Couldn't edit above post, to clarify, the model is being changed and drop-down follows the model in most cases, but not all cases. My app is essentially a pop up grid editor if that helps understand the context. Moving from grid row to grid row changes the edit dialog but this drop down isn't always following the model in the supplied case (even though I've verified the model value is correct).

 

Here is the html element:

<input kendo-drop-down-list='portfolioId' k-options='portfolioIdOptions' style='width:auto; min-width:300px; max-width:350px;' ng-model="dsActiveRow.portfolioId" />

[Georgi Krustev]

Hello Tim,

Could you change the ng-model directive to k-ng-model and set data-value-primitive="true"?

I am afraid that I would not be able to provide more specific solution until I review a working demo. As you mentioned, the case is complex and in order to find the best solution, we will need to test the scenario locally.

Regards,
Georgi Krustev
Telerik

 

 

[Tim]

Unfortunately that didn't fix it. I put together a kendo ui dojo to show how I'm using it, I may be ​doing something ​wrong and you all can alter my code pattern: Sample cascading with grid​. Click around the grid and you'll see the drop down gets out of sync within 2-3 row clicks. I use the code pattern you see as my real code is a much more complex data model that involves hierarchies, secondary data sources, and other such complexities that make this pattern a more readable solution by isolating the data in this way and I can control tests for dirty based on our business rules and using deep copies I can support custom 'new' and 'copy' features too.

It seemed to fail even quicker in the demo than my screens but that may just ​be a function of timing when the Kendo controls are getting change notices (my guess). I have noticed if I make the windows holding the edit fields 'non-modal' and move around on the grid (like the link above) the cascade dropdowns will get out of sink very quickly as they change the underlying model with the 'wrong' values probably due to display and message timing? I have noticed models attached to a cascade dropdown go through these stages while loading when a model is changed under the form elements:

1. old value
2. null value
3. first value in the filtered/cascade list attached to the drop down
4. final correct value

I suspect in this logic, if another UI event occurs, it gets stuck mid-bubble and the value can become corrupted. Making the edit dialog 'modal' allows me to rollback changes to the grid on-close and thereby fixing any model damage that occurs while moving around on the grid with the edit dialog open and slows down the UI pattern. First load seems to always work so this patterns allows me to continue coding on the solution.

I simply put in the following to fix for the problem ​at the moment. I hate using jquery inside an Angular controller but the code must go on... I also ​left the edit box modal ​as moving quickly around the grid screen still damages the underlying model attached to a visible editor window (my window close code does a cancelchanges call). It does not seem to be a problem when the editor is hidden and you move around clicking rows of the grid.

$scope.$watch('dsActiveRow.portfolioId', function(newv, oldv) {
    console.log('watch called on portid old/new', oldv, newv);
    if ($scope.dsActiveRow) {
        console.log('inside watch');
        // not showing current model value in all cases so assign it directly to the drop down
        $("#portfolioId").data("kendoDropDownList").value($scope.dsActiveRow.portfolioId);
    }
});

[Tim]

Sorry for the double posts. I noticed if you click slowly on the sample it works all day. As you speed up your row clicks, it becomes more likely to damage the values.

[Georgi Krustev]

Hello Tim,

thank you for the repro demo and for the detailed information. I run the demo locally, but I couldn't notice any "out of sync" behavior. Probably I am missing something obvious:

• http://screencast.com/t/zcIP7Ntu

Note that I've tested with the given and demo and with modified one that uses k-ng-model directive:

• http://runner.telerik.io/fullscreen/eBAHA

Any hints that could help us to observe the erroneous behavior locally are much appreciated.

Regards,
Georgi Krustev
Telerik

 

 

[Tim]

Very odd. I can see in your screencast it works perfectly. Here is mine:

http://www.screencast.com/t/NwKYuoMHvpVz

From this you can see it breaks within 3 clicks. I've tried in

Firefox: ​38.0.1

Chrome: 45.0.2454.101 m

Windows 7 64bit

 If I change one of the values like you did in the screencast it works great. If I don't change anything it breaks in a few clicks. Very odd that it isn't doing that for you. Anything else you can think of I could share to help get to the bottom of this?

 Thanks

[Tim]

Very odd. I can see in your screencast it works perfectly. Here is mine:

http://www.screencast.com/t/NwKYuoMHvpVz

From this you can see it breaks within 3 clicks. I've tried in

Firefox: ​38.0.1

Chrome: 45.0.2454.101 m

Windows 7 64bit

 If I change one of the values like you did in the screencast it works great. If I don't change anything it breaks in a few clicks. Very odd that it isn't doing that for you. Anything else you can think of I could share to help get to the bottom of this?

 Thanks

[Georgi Krustev]

Hello Tim,

Thank you for the screencast. I am pretty confused too, because it works just fine on my end:

• http://screencast.com/t/3SHOoGqVfxUj

As you can see, in the screencast, both browsers are up to date and the values are synced accordingly.

Unfortunately, it is pretty hard to find the cause of the issue when we cannot replicate the issue locally. Would it be possible to try the demo in "Incognito" mode, thus we will exclude all installed extensions. Also could you upgrade the browsers?

Regards,
Georgi Krustev
Telerik

 

 

[Jakub]

When its gonna be fixed? Iam still waiting for functionality that when I bind my datasource to dropdownlist then the k-ng-model will also be set as first selected item.

[Georgi Krustev]

Hello Jakub,

The dropdownlist widget is designed to match the model during its initial load. It will not modify the model unexpectedly. If the model field is empty, then the widget will not select anything. A similar discussion shed more light on this:

• https://github.com/telerik/kendo-ui-core/issues/312

Regards,
Georgi Krustev
Telerik