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

160

Shafaq Kazmi posted over 8 years ago

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

3995

Offline Deyan Kamburov posted over 8 years ago

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
Cancel
Reply

Cancel
370

Offline Shahab Ashraf posted over 8 years ago in reply to Deyan Kamburov

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
Cancel
Reply

Cancel
3995

Offline Deyan Kamburov posted over 8 years ago in reply to Shafaq Kazmi

No problem.
Cancel
Reply

Cancel
165

Jahanzaib Khan posted over 8 years ago in reply to Deyan Kamburov

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
Cancel
Reply

Cancel
165

Jahanzaib Khan posted over 8 years ago in reply to 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

igniteui-angular2.rar
Cancel
Reply

Cancel
3995

Offline Deyan Kamburov posted over 8 years ago in reply to Jahanzaib Khan

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.
Cancel
Reply

Cancel

Reply

165

Jahanzaib Khan posted over 8 years ago in reply to Deyan Kamburov

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
Cancel
Reply

Cancel

Children

No Data