Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Shafaq Kazmi
160
Preserve the state of tree grid (expand/collapse & scroll) on data source update
posted

I am using igTreeGrid with AngularJs. In my scenario, data is being updated after X time interval. Issue is, on each data update, expand/collapse state doesn't preserve. It's reset to initial state. Also scroll position is also back to top. Here is the fiddle link: http://jsfiddle.net/tvsa5hwu/2/

Is there any way around to preserve tree grid state on data refresh?

//Below is the code which updates data source after 4scs. To show the issue,
//I am just copying the 1st item and re adding it with new id.
//Originally there will be some new data OR updates in existing data
$scope.counter = 1;
$interval(function() {
    var duplicateItem = angular.copy($scope.dataSource[0]),
        grid = $("#igniteGridId").data('igTreeGrid');
    duplicateItem.name = "New node - " + $scope.counter++;
    $scope.dataSource.push(duplicateItem);
    if (!angular.equals(!$scope.dataSource, grid.options.dataSource)) {
        grid.options.dataSource = $scope.dataSource;
          grid.dataBind();
    }
}, 4000);
Parents
No Data
Reply
  • 3995
    Offline posted

    Hello,

    Data binding requires rendering all rows again and that's why the scroll position is not retained.

    To achieve this the behavior you want I'll suggest enabling Updating and use it's API to add new rows.

    I modified your fiddle here

Children