Column Hide and Showing is not working for Grid sub tabs.

[bsolTeamBglr]

Hi Team,
        We are facing column hide and show issue for the grid available under sub tabs.  Let's say there are two tabs Tab "A" and Tab "B". Tab "A" is having only one grid "Grid 1" and there is no sub tabs. Tab "B" is having three sub tabs with grid name "Sub tab1 Grid1" , "Sub tab2 Grid 2" and  "Sub tab3 Grid 3".  Based on Grid1 we need to hide the data in sub tab1 grid 1 and sub tab2 grid2 and Sub tab3 grid3. But it is hiding and showing only for Sub tab1 Grid1 but not for other sub tabs.

Note: It is hiding and showing required column only when we click in any of the cell for sub tab2 grid2 and sub tab3 grid3.

[paramvir]

Please share a test case/ jsfiddle so that I can check it..

[bsolTeamBglr]

Hi ParamQuery Team,
I have two tabs whose name is 'Configuration' and 'Port Activities' and sub tabs for 'Port Activities'
is 'Port ActivitiesVoy #1' and 'Port ActivitiesVoy #2'

JSFiddel URL:  http://jsfiddle.net/z20er9mj/

Note:
In Our Project we are using:
#Using the pqGrid version 3.4.1
#For Tabs using JQuery Version v1.12.1

Requirement:
# On Change of Configuration Tab Value need to hide and show the 'Port Activities' sub tabs column. 
  Example: In Configuration Tab- If I change the value for column 'Config Property' HideAndShowRank value setted
      as 'Y' then need to hide the 'Rank' column in 'Port Activity' sub tabs (Both #1 and #2 sub tabs) 

Note:
#Configuration Tab values not able to edit in the provided js fiddle as Param query version is not compatible. As we are using 3.4.1 We are not sure where to get CDN of 3.4.1. We are giving fiddle with pq grid version 3.3.1.

Kindly help us to hide the columns under all sub tabs based on the configuration values.

Thanks and Regards,
BSOL Team

[paramvir]

Thanks for the jsfiddle.

It's important to refresh grid whenever it's displayed after enclosed in hidden div ( tab panes in your case)

Code: [Select]

function onTabsActive(evt, ui){
            //grid requires refresh whenever corresponding tab is refreshed.
            ui.newPanel.find(".pq-grid").pqGrid("refresh");
        };
    $( "#tabs-3" ).tabs().on("tabsactivate", onTabsActive);            
    $( "#tabs-7" ).tabs().on("tabsactivate", onTabsActive);  
    $( "#tabs" ).tabs().on("tabsactivate", onTabsActive);

Update jsfiddle: http://jsfiddle.net/z20er9mj/1/

[bsolTeamBglr]

Thanks

Its working fine.