jQuery UI Widgets › Forums › Navigation › Tabs › Multiple Tabs Displaying Different Views of Same Grid
This topic contains 2 replies, has 2 voices, and was last updated by markos111 2 years, 11 months ago.
-
Author
-
I am attempting to create several tabs showing a filtered view of the same grid. Tab 1 would have all the rows, tab 2 would have a subset, tab 3 a different subset. Only the first and the last tabs are rendering properly though; it works perfectly with just two tabs. From looking at the HTML when testing out the tabs, it looks like only grid1 and grid4 are assigned the role of “grid”, while the other two are stuck with “tabpanel”. The initGrid functions are all calling the same source but with a different “filter” (just a parameter passed) to show the desired subset. Does anyone have an example of rendering 3 tabs which hold a jqxGrid on each tab? I am a newbie with this so any help would be greatly appreciated.
Here is a snippet of code- please let me know if you need any more information
var initWidgets = function (tab) { switch (tab) { case 0: initGrid(); break; case 1: initGrid2(); break; case 2: initGrid3(); break; case 3: initGrid4(); break; } } $('#jqxTabs').jqxTabs({ height: 560, initTabContent: initWidgets });
<div id='jqxTabs'> <ul> <li style="margin-left: 30px;"> <div style="height: 20px; margin-top: 5px;"> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> T1 </div> </div> </li> <li> <div style="height: 20px; margin-top: 5px;"> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> T2 </div> </div> </li> <li> <div style="height: 20px; margin-top: 5px;"> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> T3 </div> </div> </li> <li> <div style="height: 20px; margin-top: 5px;"> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> T4 </div> </div> </li> </ul> <div id="grid1"></div> <div id="grid2"></div> <div id="grid3"></div> <div id="grid4"></div> </div>
Thank you!
Hi markos111,
Thank you for contacting us!
Unfortunately, I couldn’t replicate your issue, but I created this demo based on the information you gave us:
https://jseditor.io/?key=jqwidgets-tabs-template-ver-2Please let me know if this demo works for you!
If you have any other questions, do not hesitate to contact us again.
Best regards,
Ivan Peevski
jQWidgets Team
https://www.jqwidgets.comThe demo works great Ivan. I have fixed it thanks to your code! I am not 100% certain, but I would think it was being caused by something to do with having all the grid functions within the document.ready function. I moved everything out besides the tab initialization and it works now!
Appreciate the help!
-
AuthorPosts
You must be logged in to reply to this topic.