Forum
Log In
Home
Topic RSS
23:52
22/02/2013
Offline
Hi All, I've searched through the forums a bit to see if anyone had any examples of multiple grids on one page but I didn't find much info so here's my question. I've made a simple example of 3 grids(no data) in 2 divs. The first grid spans most of the first div while the 2nd and 3rd are meant to horizontally split the 2nd div. However, once I call jqGrid, all of the grids have the same width and stack vertically on one another instead of following their containing divs.
I'm new to jqGrid and not very good with CSS so I'm sure I'm doing something stupid on the CSS side but don't get why the each grid won't populate it's respective container. If I use absolute position on all of the divs, I can get the first grid to follow its div but the other grids just stack under it.
Here's the html/javascript/jquery:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>multiple grids</title>
<link rel="stylesheet" href="jquery/simple.css" />
<link rel="stylesheet" href="ui.jqgrid.css" />
</head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" scr="jquery/jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.js"></script>
<script type="text/javascript" src="jquery/jqGrid/js/i18n/grid.local-en.js"></script>
<script type="text/javascript" src="jquery/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// initialize all of the datagrids
populateGrid1();
populateGrid2();
populateGrid3();
});
function populateGrid1()
{
var names = ['grid1_col1', 'grid1_col2', 'grid1_col3', 'grid2_col4'];
var model = [ {name:'grid1_col1', index:'col1'},
{name:'grid1_col2', index:'col2'},
{name:'grid1_col3', index:'col3'},
{name:'grid1_col4', index:'col4'} ];
$("#grid1").jqGrid({
colNames: names,
colModel: model,
rowNum: 100,
sortname: 'platform',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'Grid1',
autowidth: true,
height: 230
});
}
function populateGrid2()
{
var names = ['grid2_col1', 'grid2_col2', 'grid2_col3', 'grid2_col4'];
var model = [ {name:'grid2_col1', index:'col1'},
{name:'grid2_col2', index:'col2'},
{name:'grid2_col3', index:'col3'},
{name:'grid2_col4', index:'col4'} ];
$("#grid2").jqGrid({
colNames: names,
colModel: model,
rowNum: 100,
sortname: 'col1',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'Grid2',
autowidth: true,
height: 230
});
}
function populateGrid3()
{
var names = ['grid3_col1', 'grid3_col2', 'grid3_col3', 'grid3_col4'];
var model = [ {name:'grid3_col1', index:'col1'},
{name:'grid3_col2', index:'col2'},
{name:'grid3_col3', index:'col3'},
{name:'grid3_col4', index:'col4'} ];
$("#grid3").jqGrid({
colNames: names,
colModel: model,
rowNum: 100,
sortname: 'col1',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'Grid3',
autowidth: true,
height: 230
});
}
</script>
<body>
<h1 align="center">Multiple grid placement</h1><br>
<div class="wrapper1">
<div id="grid1Item"><table id="grid1" /></div>
</div>
<div class="wrapper2">
<div id="grid2Item"><table id="grid2" /></div>
<div id="grid3Item"><table id="grid3" /></div>
</div>
</body>
</html>
And the css:
html, body {
background: #FFFFFF;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.wrapper1 {
position: relative;
top: 0px;
left: 0px;
right: 0px;
height: 400px;
background: #555555;
border-style: ridge;
border-width: medium;
}
.wrapper2 {
position: relative;
top: 420px;
left: 0px;
right: 0px;
height: 400px;
background: #555555;
border-style: ridge;
border-width: medium;
}
#grid1Item {
position: absolute;
margin: 1%;
top: 50px;
left: 0px;
width: 98%;
height: 275px;
background: #FF0000;
}
#grid2Item {
position: absolute;
margin: 1%;
top: 30px;
left: 0px;
width: 48%;
height: 320px;
background: #00FF00;
}
#grid3Item {
position: absolute;
margin: 1%;
top: 454px;
left: 50%;
width: 48%;
height: 320px;
background: #0000FF;
}
Thanks for any advice you throw my way!
Bill.
20:29
22/02/2013
Offline
I found the problem!
I needed to more formally close the <table> tags in my html.
<div id="grid1Item"><table id="grid1″ /></div>
needs to be
<div id="grid1Item"><table id="grid1″></table></div>
I never knew that the table tag was so picky but that simple change fixed all kinds of other browser compatibility problems I was having as well as the stacking grid problem I was seeing!
12:15
Moderators
30/10/2007
Offline
Hello,
A very very simple test to this is:
Just do not use jqGrid, but add fome data manually in the tables and see the result.
Glad the problem is resolved
Regards
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
19 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
