Reload tab

[queensgambit9]

Trying to reload active tab when clicking on title in grid...use onclick in title definition or is there a better way?

[paramvir]

Please help me understand your requirement.

May I know what's the content of tab and what do you mean by "reload tab" and how do you do it?

[queensgambit9]

Using jQuery tabs and on each tab the title is clickable. When the user clicks the title I would like to reload grid in that tab (stay in the tab but grid is reloaded).

[paramvir]

Click on a tab's title activates the corresponding panel and fires activate event.

Hence tab's activate event can be used to reload the grid in corresponding panel.

Code: [Select]

        $("#tabs").tabs({
            activate: function (evt, ui) {
                ui.newPanel.find(".pq-grid").pqGrid('refreshDataAndView');
            }
        });


[queensgambit9]

It is the grid title and not the tab title. Sorry for being unclear.

[queensgambit9]

Ex:

Code: [Select]

title: "<a href='index.php#tab1'>test</a>"
But that doesn't seem to work...

[paramvir]

It it's grid title, then it's nothing to do with tabs.

Please use this to reload grid when its title is clicked.

Code: [Select]

$( selector ).find(".pq-grid-title").click(function(){
$(this).closest(".pq-grid").pqGrid('refreshDataAndView');
})


[queensgambit9]

Thanks, using:

Code: [Select]

create: function() {
 
    $( '#grid1' ).find(".pq-grid-title").click(function(){
$(this).closest(".pq-grid").pqGrid('refreshDataAndView');
})...

Do not work as I would like it to...grid in current tab should reloaded to its initial state...with above code columns are not restored, filters not removed etc.
Is it correct to use it in create event?

[paramvir]

Please share your complete requirements along with jsfiddle.

[queensgambit9]

https://jsfiddle.net/queensgambit9/g4h0mory/12/

When I click grid title 'test' in Tab 1 I would like to load a state called 'test'.

[paramvir]

your create event would be

Code: [Select]

create: function() {
      var grid = this;
      $('#grid1').find(".pq-grid-title").click(function() {
        var state = localStorage.getItem(prefix(grid) + 'test');
        grid.loadState({
          state: state
        })                   
      })
      refreshToolbar(grid)
    }

https://jsfiddle.net/81Ltrg25/

[queensgambit9]

Thank you, works fine.