Pivot state

Site and Services
#1

Hi,

I load the pivot data every second,
How can I save the state for “close” or “open” rows according to the user’s selection after the reload.

Thanks,
Miri

#2

After data reloading, configured rows will get new unique IDs. Thus, opened nodes and selection cannot be restored.

If data is static, it’s possible to reach the inner datatable and use the setState()/getState() API, it will work as well as they do for the ui.treetable.

 var state = $$("pivot").$$("data").getState();
/* . . . */
 $$("pivot").$$("data").setState(state);
 $$("pivot").$$("data").refreshColumns();

But there’s another important note:

  • treetable’sget/setState works only for the same grid, i.e within one Pivot’s configuration. If filters/columns/rows/values were reconfigured in any way,setState() of the previous config can’t be applied to the new one.
#3

Hi

Our use case is this, we need to update the data each second, and maintain tables state between updates of course. Is it possible with Webix components?

Currently we are trying to implement your suggestion,
using this piece of code

let myPivot = $$(“pivot”);

// … working with pivot …

// save state before update
let state = myPivot.$$(“data”).getState();

// update pivot
myPivot.parse([… new data … ] );

// restore state after update
myPivot.$$(“data”).setState(state);

After we try to restore state pivot table gets empty.
Without setState update is working ok.

Another question, if we can fix if does ‘state’
which params are saving in the state

  1. scrollbar position?
  2. sorting?
  3. filtering?
#4

Again, as the newly loaded data will have different IDs, the previous state cannot be set. All above description is for the one dataset in one configuration. setState() is a method of the treetable, not Pivot, so it dictates some important limitations for applying it for Pivot’s table.

> After we try to restore state pivot table gets empty

Anyway, here I can confirm the issue - a datatable with a frozen column does not re-render onsetState(). We’ll fix it, but for now refreshColumn() has to be applied aftersetState().

As for the second question:

  • Scrolls and sorting - yes

  • No, as filters are set outside the treetable and depend on Pivot API

#5

Dear Listopad,

I’ve followed your advice regarding the workaround the setState() to be followed by refreshColumn(). Unfortunately it did not work.

I need to keep the the open/close (expand/collapse) state after refresh. setState() does not restore it.

What I tried to do to overcome the ID issue is to getState1 before the update and then getState2 following pivot update. I’ve modified the state2 with the new IDs according to the open row numbers in state1. Same rows as in state1 but with the new IDs as in state2 (following the pivot update)

It did not work but I’m unsure if it’s a problem in setState or otherwise.

I’m sure that I’m not the only person that needs to preserve the states between update. Is there another way to open/close (expand/collapse) the items programmatically ??

See code below;
let state2 = this.pivot.$$(“data”).getState();
state2.open.splice(0, 1);
this.pivot.$$(“data”).setState(state2);
this.pivot.$$(“data”).refreshColumns();

Thanks,

#6

Please grab latest pivot 4.2.6
Now you can add stableRowId parameter to the pivot.

webix.ui({ view:"pivot", stableRowId:true

As result, each row will have an unique Id based on its grouping, and getState || setState will work correclty for common data refreshes.

var state = pivot.$$("data").getState().open;
pivot.refresh();
pivot.$$("data").setState({ open: state });
#7

Hi Maksim,

I did try about snippet, Looks like above code is not working.

#8

Hello @subbuwebix ,

Please check the sample:
https://snippet.webix.com/qjxyemco

#9

Hi Nastja,

I would like to know how to handle pivot expand/collapse events.