xgote on Grid inside a tab / hidden container

Tue, 09 Feb 2010 23:09:49 +0200

I modified this style (after drinking caffeine):

.tabs div {
    display: none;
}

#step1, #step2, #step3 {
    display: none;
}

There are better ways to do this I know but essentially this problem was an overly zealous style definition..

xgote on Grid inside a tab / hidden container

Tue, 09 Feb 2010 23:00:49 +0200

I'm trying to render a grid inside of a hidden div but nothing happens. I've also tried calling the grid method after a click event, without sucess. Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="description" content="description"/>
    <meta name="keywords" content="keywords"/> 
    <meta name="author" content="author"/> 
    
    <link rel="stylesheet" type="text/css" href="/jqgrid/css/ui.jqgrid.css" media="screen"/>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" type="text/css" />
    
    <title>Inventory</title>

    <script src="http://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="/jqgrid/src/grid.loader.js" type="text/javascript"></script>
    <style>
    .selected {
        border: 1px dotted #000000;
    }
    .tabs div {
        display: none;
    }
    </style>
    <script type="text/javascript">
        google.load("jqueryui", "1.7.2");
        google.load("jqueryui", "1.5.2");
        
        
        $(document).ready(function() {
            //.ui = true;
            $(function() {
                    $("#new-content-button").click(function() {
                            $("#dialog").dialog({
                                                    height: 285,
                                                    width: 585,
                                                    modal: true
                            });
                    });
            });
            
            var tabContainers = $('div.tabs > div');
            
            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide().filter(this.hash).show();
                
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                
                return false;
            }).filter(':first').click();
            
            jQuery("#list4").jqGrid({ 
                    datatype:   "local", 
                    height:     250, 
                    colNames:   ['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
                    colModel:   [ {name:'id',index:'id', width:60, sorttype:"int"}, 
                                  {name:'invdate',index:'invdate', width:90, sorttype:"date"}, 
                                  {name:'name',index:'name', width:100}, 
                                  {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, 
                                  {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, 
                                  {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, 
                                  {name:'note',index:'note', width:150, sortable:false} ], 
                    multiselect: true, 
                    caption: "Manipulating Array Data" 
            }); 
            
            var mydata = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
                           {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
                           {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
                           {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
                           {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
                           {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
                           {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
                           {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
                           {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; 
                           
            for(var i=0;i<=mydata.length;i++) {
                jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]); 
            }
            
        });
    </script>


</head>

<body>

<div class="container">

	<div class="main">

		<div class="header">
		
			<div class="title">
				<h1>Grid in Tabs</h1>
			</div>

		</div>

        
        <div id="dialog" title="A Dialog" style="display: none;">
            This is a dialog!
        </div>
        
        <div class="tabs">
            <!-- tabs -->
            <ul class="tabNavigation">
                <li><a href="#step1" id="step1-tab">Step - 1</a></li>
                <li><a href="#step2" id="step2-tab">Step - 2</a></li>
                <li><a href="#step3" id="step3-tab">Step - 3</a></li>
            </ul>
        
            <!-- tab containers -->
            <div id="step1">
                <p>Paste your names here, separated by commas</p>
                <textarea cols="75" rows="10"></textarea>
                <br />
                <input type="button" value="Step 2">
            </div>
            <div id="step2">
                 <table id="list4"></table> list4
            </div>
            <div id="step3">
                <p>Ut enim ad minim veniam</p>
            </div>
        </div>
        

	</div>

	<div class="footer"></div>

</div>

</body>

</html>

This seems to work when I pull the table the grid is attempting to render, out of any hidden divs. Any help appreciated.

jQuery Grid Plugin - jqGrid - Topic: Grid inside a tab / hidden container

xgote on Grid inside a tab / hidden container

xgote on Grid inside a tab / hidden container