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 2016 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
    2287 posts

    Posted 21 Jan 2016 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