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

Lila

ui tabs code please? are u using any plugin? post some html code and i'll write js for it. BTW nice question after a very long time on JqGrid. +1 from myside. – Legalese

i have just used jqgrid....the coder is almost same as used in this ok-soft-gmbh.com/jqGrid/ButtonsInTheColumnHeaders.htm... – Lila

give me a minute, I'm almost done writing code for u. What do u mean by tab should appear on top of page? – Legalese

means if there are 3 tabs like manager, lead and employee and there are three grids for them respectively then when i click manger tab, it should open manager's grid and the tab name Manager should appear on top of the grid.... – Lila

okay give me a couple of minute. – Legalese

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.

Legalese

you are doing it in the same grid...i have 2 different grids.... i want to load 2 different grids on two tabs... – Lila

and can u pls provide it in jsfiddle...plzz – Lila

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);
                }


            }
        });

Ibanez