Hide/show column in a grid that hasn't been loaded befor

[NewtonParticipant]

Hi,

I’ve got a grid and want to show/hide columns. This works perfectly if the grid has been loaded before, meaning that the grid was created to be shown on the screen. But when the grid hasn’t been loaded before (because it’s within a tab that hasn’t been opened, for example), somehow it does not.

I’ve created a JSFiddle to demonstrate my issue: http://jsfiddle.net/zkz6xuzz/

If you deselect the option “Show First Name” in the first tab before you navigated to the other tabs, the grid in tab3 won’t adjust. If you run the fiddle again, first open tab3, then deselect the option in tab1 and go back to tab3 everything works fine. The grid in tab2 always works. This is very strange because the two grids are set up identically.

Any help appreciated!

[HristoParticipant]

Hello Newton,

I would suggest you use initTabContent when you set widgets in the Tabs.
In the described case when you try to hide one column the Grids should be initialized before use ‘hidden’ method.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[NewtonParticipant]

Thanks, Hristo – your approach seems to solve my issue.

[NewtonParticipant]

After some testing I realize that I can’t change my whole page to follow your approach with initTabContent. I’ve got quite a complicated setup with 6 main tabs that contain each 3 subtabs that have each a layout consisting of various splitters. Than I’ve got a parameter such as the showFirstName in my little jsfiddle that should affect different grids which reside in different tabs, subtabs and splitters.

Currently I’ve got all my grid and other jqx instances defined outside any initTabContent. When I put the instance of let’s say grid A inside the initTabContent of let’s say tab 2, subtab 3, I can’t access it before tab 2, subtab 3 is loaded. But I need to access the data of grid A right away to calculate more arrays with wich a create let’s say some charts in other tabs. These tabs might be loaded before the tab that contains grid A. By accessing the data of a grid I mean getting the content of the grid into a java script array, such as $(‘#gridA’).jqxGrid(‘getrows’) and then sort, filter and so on.

Isn’t there a possibility to initialize specific grids at the page loading no matter if they are displayed on visible tabs content? Something like $(‘#gridA’).initialize(), which must be triggered when a user navigates in a way that the grid is actually rendered on screen?

[HristoParticipant]

Hello Newton,

Unfortunately, there is not such possibility.
I would like to suggest you try one alternative – you could select each one tab sequential and on the end select the first.

$("#tabs").jqxTabs('select', 1);
$("#tabs").jqxTabs('select', 2);
$("#tabs").jqxTabs('select', 0);

If you just want the data in the Grid you could use dataAdapter.records and you will fetch all the data.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts