.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:
$(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
});
}
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.
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
