Tabs in JQUERY for loading JQGRID

Question

i am making grid using jqgrid

i want to create tabs in my application Clicking on a tab should open a grid and the name of the tab should appear on top of the page and when i click on another tab it should load the other grid.. the grids should be loaded on the same page and the tabs should also appear all the time on the page i have already created the grids just want to integrate them with the tabs... plzz help me thanks in advance.....

Answer 1

Okay following will be the code for you. I'm using same data for both(emp, manager) the tabs you can change it later.

HTML

 <div id="tabs">
    <ul>
        <li><a href="#tabs-1" id="tab1">emp</a></li>
        <li><a href="#tabs-2" td="tab2">manager</a></li>

    </ul>
    <div id="tabs-1">
        <table id="list"><tr><td/></tr></table>
                <div id="pager"></div>
    </div>
    <div id="tabs-2">
        <table id="list1"><tr><td/></tr></table>
        <div id="pager1"></div>
        </div>

</div>

JavaScript

$(function () {
            'use strict';
            var $tabs=$('#tabs').tabs();

            var selected = $tabs.tabs('option', 'selected');

            if(selected==0){

               var mydata = [
                    {id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"}

                ],
                $grid = $("#list"),$pager = $("#pager");
                callMe($grid,mydata,$pager);


          }
          $('#tabs').bind('tabsselect', function(event, ui) {

    selected=ui.index;

    if(selected==0)
    {
     var mydata = [
                    {id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"}

                ],
                $grid = $("#list"),$pager = $("#pager");
                callMe($grid,mydata,$pager);
    }

    if(selected==1)
    {
     var mydata = [
                    {id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"}

                ],
                $grid = $("#list1"),$pager = $("#pager1");
                callMe($grid,mydata,$pager);
    }

        });
            function callMe(grid,mydata,pager){
            grid.jqGrid({
                datatype: 'local',
                data: mydata,
                colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
                colModel: [
                    {name: 'invdate', index: 'invdate', width: 90, align: 'center', sorttype: 'date',
                        formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
                    {name: 'name', index: 'name', width: 100},
                    {name: 'amount', index: 'amount', width: 105, formatter: 'number', sorttype: 'number', align: 'right'},
                    {name: 'tax', index: 'tax', width: 95, formatter: 'number', sorttype: 'number', align: 'right', hidden: true},
                    {name: 'total', index: 'total', width: 90, formatter: 'number', sorttype: 'number', align: 'right'},
                    {name: 'closed', index: 'closed', width: 95, align: 'center', formatter: 'checkbox',
                        edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
                    {name: 'ship_via', index: 'ship_via', width: 130, align: 'center', formatter: 'select',
                        edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
                    {name: 'note', index: 'note', width: 90}
                ],
                rowNum: 10,
                rowList: [5, 10, 20],
                pager: pager,
                gridview: true,
                rownumbers: true,
                sortname: 'invdate',
                viewrecords: true,
                sortorder: 'desc',
                caption: 'Buttons in the column headers',
                height: '100%'
            });
           } 
        });

So, here my by default selected tab will be emp and its index will be 0, so I'm checking for it initially and then on tabselect event, I'm checking for index again. For emp index is 0 and manager index is 1. based on that I'm changing the grid and pager value, you can change your data here. This will work for you. I dont know much about ui tabs I'll study for it further. But for now this will work for you.

Answer 2

Piyush,

Great answer but there's a slight problem in your code that is not compatible with the latest version of jquery UI. If you are using jqueryUI 1.10.x and above, you will have to use the "active" optionName instead of "selected", per this change: http://jqueryui.com/upgrade-guide/1.10/#removed-selected-option-use-active

Also the event model has changed as well. I updated the code below and tested it and it works fine in jQuery UI 1.10.3:

<script >
    $(function () {
        'use strict';
        var $tabs = $('#tabs').tabs();

        var selected = $tabs.tabs('option', 'active');

        alert(selected);
        if (selected == 0) {

            var mydata = [
                 { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }

            ],
             $grid = $("#list"), $pager = $("#pager");
            callMe($grid, mydata, $pager);


        }

        $("#tabs").tabs({
            activate: function (event, ui) {

                selected = ui.newTab.context.id;
                alert(selected);
                if (selected == "tab1") {
                    var mydata = [
                                   { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }

                    ],
                               $grid = $("#list"), $pager = $("#pager");
                    callMe($grid, mydata, $pager);
                }

                if (selected == "tab2") {
                    var mydata = [
                                   { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }

                    ],
                               $grid = $("#list1"), $pager = $("#pager1");
                    callMe($grid, mydata, $pager);
                }


            }
        });