savestate with tabs

[queensgambit9]

Hi

Having some issues with saveState and tabs.

- On tab 2 the dropdown for states doesn't seem to be correctly refreshed?
- When 'None selected' is choosen, I would like to reset grid to default layout for current tab...how can I do this?

https://jsfiddle.net/queensgambit9/ubk3hwpa/3/

Thanks in advance.

[paramvir]

Please make following corrections:

1. make a deep copy of any object shared between the grids i.e, toolbar

Code: [Select]

toolbar: $.extend(true, {}, toolbar )

2. Every element should have unique id. So attr: 'id="loadState"' is incorrect for first item in toolbar because it's shared between grids.

[queensgambit9]

Does this mean I have to use 2 definitions of toolbar or is there a better way?
Could you please modify jsfiddle with correct syntax?

[paramvir]

Please check this:

https://jsfiddle.net/mbqocv56/2/

Few points to be noted:

1. Every grid should have unique prefix.

Code: [Select]

  var prefix = function(grid) {
    //base it on id of grid.   
    return grid.widget()[0].id;   
  }

2. Use class selector instead of id to reference select in toolbar in case of multiple grids on a single page.

Right

Code: [Select]

grid.widget().find(".loadState")

wrong

Code: [Select]

$("#loadState")

3. pqSelect also needs a refresh similar to pqGrid when corresponding  tab is activted.

Code: [Select]

  $("#tabs").tabs({
    activate: function(evt, ui) {
      //important to refresh grid whenever corresponding  tab is activted.
      ui.newPanel.find(".pq-grid").pqGrid("refresh");

      //important to refresh pqSelect whenever corresponding  tab is activted.
      ui.newPanel.find(".pq-select").pqSelect("refresh"); 
    }
  });


[queensgambit9]

Great, thank you.

Some issues:

  - When you save a new state the new state should be selected in the state dropdown...currently generates error:
  Uncaught Error: cannot call methods on pqSelect prior to initialization; attempted to call method 'refreshData'...

  - When "None selected" is selected in state dropdown I would like to load default layout of grid...how can I do this?

[paramvir]

1. Error is fixed by replacing grid.widget().find(".loadState") with grid.widget().find("select.loadState") and getting widget instance after refreshToolbar.

https://jsfiddle.net/qyc2edgw/1/

2. Save the state of grid just after its initialization in (prefix(this) + "default") and load it when default is selected.

[queensgambit9]

Thanks. Using:

Code: [Select]

create: function() {
         
          var state = this.saveState({ save: false })
          localStorage.setItem(prefix(this) + 'default', state);

          refreshToolbar(this);
        }
I get the state available in dropdown...but it does not load when selected.
Also how can I set it as default option when grid loaded?

[paramvir]

Grid initialization is incomplete in create event, please use complete event.

Grid initial state is the default state unless you load any other state.

[queensgambit9]

Thank you.

Other issue discovered, beforeExport:

Code: [Select]

beforeExport: function( event, ui ) {
       
          var Cols = grid.Columns();
          Cols.alter(function() {
            Cols.each(function(column) {
              column.copy = !column.hidden;
            })
          })
       
        },
Uncaught ReferenceError: grid is not defined

[queensgambit9]

Still having issues with Export...

http://jsfiddle.net/queensgambit9/g4h0mory/3/

How can I make it work when using multiple tabs...?

[paramvir]

It seems you are having problems with undefined global grid variable used in beforeExport event.

One way is to define global grid1 variable for first grid, grid2 for second grid and so on, but global variables should better be avoided as far as feasible, especially in case of multiple grids as the code becomes messy.

To get rid of global variables, we can use context "this" of the callbacks and events to get reference to the current grid.

Code: [Select]

beforeExport: function(event, ui) {

      var Cols = this.Columns();
      Cols.alter(function() {
        Cols.each(function(column) {
          column.copy = !column.hidden;
        })
      })
}

https://paramquery.com/pro/tutorial#topic-special-vars