jQuery Grid Plugin - jqGrid - Topic: Multiple grids want to stack on top of another... http://www.trirand.com/blog/?page_id=393/help/multiple-grids-want-to-stack-on-top-of-another Simple:Press Version 5.7.5.3 tony on Multiple grids want to stack on top of another... http://www.trirand.com/blog/?page_id=393/help/multiple-grids-want-to-stack-on-top-of-another#p28328 Help http://www.trirand.com/blog/?page_id=393/help/multiple-grids-want-to-stack-on-top-of-another#p28328

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

]]> Mon, 25 Feb 2013 12:15:17 +0200 bergzilla on Multiple grids want to stack on top of another... http://www.trirand.com/blog/?page_id=393/help/multiple-grids-want-to-stack-on-top-of-another#p28323 Help http://www.trirand.com/blog/?page_id=393/help/multiple-grids-want-to-stack-on-top-of-another#p28323 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!

]]> Sat, 23 Feb 2013 20:29:46 +0200 bergzilla on Multiple grids want to stack on top of another... http://www.trirand.com/blog/?page_id=393/help/multiple-grids-want-to-stack-on-top-of-another#p28319 Help http://www.trirand.com/blog/?page_id=393/help/multiple-grids-want-to-stack-on-top-of-another#p28319 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.

]]> Fri, 22 Feb 2013 23:52:36 +0200