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