Author Topic: savestate with tabs  (Read 4132 times)

queensgambit9

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
savestate with tabs
« on: December 11, 2019, 08:32:10 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6298
    • View Profile
Re: savestate with tabs
« Reply #1 on: December 12, 2019, 05:36:55 pm »
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

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: savestate with tabs
« Reply #2 on: December 17, 2019, 06:07:30 pm »
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?
« Last Edit: December 17, 2019, 06:11:13 pm by queensgambit9 »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6298
    • View Profile
Re: savestate with tabs
« Reply #3 on: December 20, 2019, 01:34:49 pm »
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

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: savestate with tabs
« Reply #4 on: December 20, 2019, 03:49:48 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6298
    • View Profile
Re: savestate with tabs
« Reply #5 on: December 20, 2019, 05:36:38 pm »
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

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: savestate with tabs
« Reply #6 on: December 20, 2019, 07:45:34 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6298
    • View Profile
Re: savestate with tabs
« Reply #7 on: December 20, 2019, 07:56:07 pm »
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

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: savestate with tabs
« Reply #8 on: December 20, 2019, 08:43:09 pm »
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

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: savestate with tabs
« Reply #9 on: January 02, 2020, 08:28:25 pm »
Still having issues with Export...

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

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

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6298
    • View Profile
Re: savestate with tabs
« Reply #10 on: January 02, 2020, 09:21:27 pm »
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
« Last Edit: January 02, 2020, 09:24:23 pm by paramvir »