Loading new data into DataSource breaks Angular data bindings

2 posts, 0 answers
  1. Chad
    Chad avatar
    10 posts
    Member since:
    Oct 2015

    Posted 18 Jan Link to this post

    I created a demo here: 


    When you first run it, if you click in the Category column of the grid, you get a dropdown list to change the category value. If you choose a different value in the first row, you can see it reflected immediately in the text above the grid. That works via AngularJS's standard data binding: `First product's category: {{ products[0].Category }}`

    If you click the "Change Data" button, it runs a function that calls `dataSource.data([/* different array with new data... */])`, which changes the data in the grid. That works as expected. However, after this point, the dropdown list can no longer change the data. I assume that is because, when the dropdown list is initialized, it captures a reference to the original grid data, and calling dataSource.data([...]) makes the DataSource hold a reference to a new object?

    Is there a workaround for this problem? Thanks!

  2. Nikolay Rusev
    Nikolay Rusev avatar
    2276 posts

    Posted 21 Jan Link to this post

    Hello Chad,


    You must change the products reference in the $scope too when changing DataSource data.


    $scope.products = newProducts;


    Updated example - http://dojo.telerik.com/@rusev/aDIBI


    Nikolay Rusev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top