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 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • markos111
    Participant

    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!


    ivanpeevski
    Participant

    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-2

    Please 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.com


    markos111
    Participant

    The 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!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.