Preserve the state of tree grid (expand/collapse & scroll) on data source update

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

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

Hi Deyan,

With Angular, shouldn't it be possible to re-render the changed rows only, when the source updates, without having to rebind again? Since Angular supports binding, any changes to the source should be re-rendered on its own.

Regards

@Deyan: Thank you for providing a workaround. For this, I have to manually identify the changes and update accordingly (e.g. add/delete/update).

@Sehab: You are absolutely correct. This is actually, what I was expecting. AngualrJs has the power to reflect the only change set. I have worked in Ui-grid and it behaves in the same way but not IG grid does not.

I am assuming that IG grid doesn't support this feature which I have discussed so I am resolving it through workaround suggested by Deyan. But still I am looking for more better solution.

Thanks.

Actually IgGrid supports the two way data binding, but the IgTreeGrid does not, at this point.

So if you can use the IgGrid, changes will be detected, but for the IgTreeGrid you need to use the Updating API.

Hi Deyan,

Yes, you are right. I have explored the angular directive code and the two way binding is supported for igGrid only.

Can you please confirm me which is the updated version where its resolved. I am using version 16.1.20161.2052.

Thank you.

Hello Shafaq,

At this point igTreeGrid directives for AngularJS does not support two way data binding, but stay tuned so we may add it at future releases.

We have it for Angular2 though you might want to try them too.

Perfect. Thank you very much Deyan.

No problem.

Hello Deyan,

Can you please send  the sample app  with angular 2 directive that can help us resolving our issue with ignite tree grid 2 way data binding. As you mention that ig tree grid with angular 1 directive does not support 2 way data binding, can you please share a test app with angular 2 directive for ig tree grid which have 2 way data binding as it will help in resolving our issue.

Regards,

Jahanzaib Khan

Hello Deyan,

I have tried anuglar 2 as per your advice. And angular 2 have data binding but it don not preserve the state which is i think due to refreshing of the grid every time any change in data source of grid occurs. When ever you update the data source the grid moves to its default state, i mean when i loaded the grid and move to 100th row and then a change occur in data source of grid then grid scrolls back to top which is a issue ,or if you have nodes in your tree grid and you have collapsed all of the nodes and if any change occurs in your data source then those node will return to their default state which is expanded. So how we can preserve the state of grid upon any change.

I am attaching a test app for you with this post, please download the folder. For running the app first open the command prompt and go the the directory which contains the code and then run this command "npm install " for installing all the dependecies reuqired for anuglar 2 and then run command "npm start" for starting the application in your browser.In you browser page select the igTree grid option this will navigate you on the ig grid page there you will see a tree grid with update button. Click on update button multiple time with the scenarios i have explained you above. I am waiting for your feed back on this issue.

Thanks,
Jahanzaib

Hello Jahanzaib,

The described behavior is expected and a complete data binding is done. For your case I'm suggesting using the Updating API.

You can change the getUpdate function to:

    getUpdate(tgridOptions) {
        console.log(tgridOptions,"Testing");
        var record = tgridOptions.dataSource[0];
        $("#tgrid1").igTreeGridUpdating("updateRow", record.Id, {Name: "My Total" + Math.floor((Math.random() * 10) + 1), Beta: Math.floor((Math.random() * 10) + 1)});
        var randNumbner  = Math.floor((Math.random() * 100) + 1);
        var child10 = tgridOptions.dataSource[0].Childs[1].Childs[randNumbner];
        $("#tgrid1").igTreeGridUpdating("updateRow", child10.Id, {Name: "Changed Name"});

    }

It will preserve the horizontal scroll and expand/collapse state.

Hi Deyan,

Thanks for your quick reply. You suggested update api for updating the grid with change/new data set, what i want to know is can we update  multiple rows at once like i receive a new  data set from server after every 4 seconds and i will call some update api method and pass this new data set from server to that method of update api and it will update the rows by identifying them that either these rows are new or already present on  basis of some primary key or some other column key, and uupdate the rows which are already present or  add the new rows if they are not present can we do that?

Example  $("#tggrid1").igTreeGridUpdating("updateRows", mydataArrayFromServer);

Regards,

Jahanzaib