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

17 posts, 1 answers
  1. Radio Vaticana
    Radio Vaticana avatar
    6 posts
    Member since:
    Jul 2009

    Posted 24 Nov 2014 Link to this post

    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
  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 26 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Radio Vaticana
    Radio Vaticana avatar
    6 posts
    Member since:
    Jul 2009

    Posted 28 Nov 2014 in reply to Georgi Krustev Link to this post

    Ok, for now, I will trigger change event.

    Thank you for your suggestion



  5. Luc
    Luc avatar
    8 posts
    Member since:
    Jul 2014

    Posted 02 Apr 2015 in reply to Georgi Krustev Link to this post

    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)



  6. Luc
    Luc avatar
    8 posts
    Member since:
    Jul 2014

    Posted 02 Apr 2015 in reply to Georgi Krustev Link to this post

    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)
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 06 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Tim
    Tim avatar
    18 posts
    Member since:
    Jul 2014

    Posted 06 Oct 2015 in reply to Georgi Krustev Link to this post

    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');
        }
    });

  9. Tim
    Tim avatar
    18 posts
    Member since:
    Jul 2014

    Posted 06 Oct 2015 in reply to Tim Link to this post

    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" />

  10. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 08 Oct 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Tim
    Tim avatar
    18 posts
    Member since:
    Jul 2014

    Posted 08 Oct 2015 in reply to Georgi Krustev Link to this post

    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);
        }
    });

  12. Tim
    Tim avatar
    18 posts
    Member since:
    Jul 2014

    Posted 08 Oct 2015 in reply to Tim Link to this post

    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.
  13. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 12 Oct 2015 Link to this post

    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: Note that I've tested with the given and demo and with modified one that uses k-ng-model directive: Any hints that could help us to observe the erroneous behavior locally are much appreciated.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14. Tim
    Tim avatar
    18 posts
    Member since:
    Jul 2014

    Posted 12 Oct 2015 Link to this post

    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

  15. Tim
    Tim avatar
    18 posts
    Member since:
    Jul 2014

    Posted 12 Oct 2015 in reply to Georgi Krustev Link to this post

    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

  16. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 14 Oct 2015 Link to this post

    Hello Tim,

    Thank you for the screencast. I am pretty confused too, because it works just fine on my end: 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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Jakub
    Jakub avatar
    24 posts
    Member since:
    Jun 2015

    Posted 14 Nov 2015 Link to this post

    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.
  18. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 18 Nov 2015 Link to this post

    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:
    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready