HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Grid</title>
<link rel="stylesheet" type="text/css" href="themes/redmond/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="themes/ui.multiselect.css" />
<script src="js/jquery-1.6.4.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="plugins/ui.multiselect.js" type="text/javascript"></script>
<script src="plugins/jquery.tablednd.js" type="text/javascript"></script>
<script src="plugins/jquery.contextmenu.js" type="text/javascript"></script>
<style>
.ui-jqgrid .ui-jqgrid-bdiv {
overflow: inherit !important;
}
.overlay{
position: absolute;
border: 1px solid black;
background-color: black;
color: #FFFFFF;
}
</style>
</head>
<body>
<table id="myjqgrid"></table>
<div id="Pager"></div>
</body>
</html>
JSON
{
"colModel": [
{
"name": "Overlay",
"label": "Overlay",
"width": 60,
"align": "left",
"jsonmap": "cells.0.value",
"sortable": true
},
{
"name": "ID",
"label": "ID",
"width": 60,
"align": "left",
"jsonmap": "cells.1.value",
"sortable": true
},
{
"name": "FirstName",
"label": "FirstName",
"width": 100,
"align": "left",
"jsonmap": "cells.2.value",
"sortable": false
},
{
"name": "LastName",
"label": "LastName",
"width": 100,
"align": "left",
"jsonmap": "cells.3.value",
"sortable": false
}
],
"colNames": [
"Overlay",
"ID",
"FirstName",
"LastName"
],
"mypage": {
"outerwrapper": {
"page":"1",
"total":"1",
"records":"20",
"innerwrapper": {
"rows":[
{
"id":"1",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"12345",
"label": "ID"
},
{
"value":"David",
"label": "FirstName"
},
{
"value":"Smith",
"label": "LastName"
}
]
},
{
"id":"2",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"37546",
"label": "ID"
},
{
"value":"Willy",
"label": "FirstName"
},
{
"value":"Peacock",
"label": "LastName"
}
]
},
{
"id":"3",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"62345",
"label": "ID"
},
{
"value":"Kim",
"label": "FirstName"
},
{
"value":"Holmes",
"label": "LastName"
}
]
},
{
"id":"4",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"186034",
"label": "ID"
},
{
"value":"Andy",
"label": "FirstName"
},
{
"value":"Wills",
"label": "LastName"
}
]
},
{
"id":"5",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"67345",
"label": "ID"
},
{
"value":"Paul",
"label": "FirstName"
},
{
"value":"Lawrence",
"label": "LastName"
}
]
},
{
"id":"6",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"12906",
"label": "ID"
},
{
"value":"Andy",
"label": "FirstName"
},
{
"value":"Charlery",
"label": "LastName"
}
]
},
{
"id":"7",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"564565",
"label": "ID"
},
{
"value":"Bets",
"label": "FirstName"
},
{
"value":"Josilyn",
"label": "LastName"
}
]
},
{
"id":"8",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"34345",
"label": "ID"
},
{
"value":"Pink",
"label": "FirstName"
},
{
"value":"Floyd",
"label": "LastName"
}
]
},
{
"id":"9",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"3429",
"label": "ID"
},
{
"value":"Rose",
"label": "FirstName"
},
{
"value":"Ben",
"label": "LastName"
}
]
},
{
"id":"10",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"6668",
"label": "ID"
},
{
"value":"Amy",
"label": "FirstName"
},
{
"value":"Wills",
"label": "LastName"
}
]
},
{
"id":"11",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"22786",
"label": "ID"
},
{
"value":"Zarine",
"label": "FirstName"
},
{
"value":"Khan",
"label": "LastName"
}
]
},
{
"id":"12",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"56444",
"label": "ID"
},
{
"value":"Dolly",
"label": "FirstName"
},
{
"value":"Mathews",
"label": "LastName"
}
]
},
{
"id":"13",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"99453",
"label": "ID"
},
{
"value":"Ginger",
"label": "FirstName"
},
{
"value":"Wills",
"label": "LastName"
}
]
},
{
"id":"14",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"1234",
"label": "ID"
},
{
"value":"Fabrice",
"label": "FirstName"
},
{
"value":"Papa",
"label": "LastName"
}
]
},
{
"id":"15",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"45000",
"label": "ID"
},
{
"value":"Helen",
"label": "FirstName"
},
{
"value":"Kites",
"label": "LastName"
}
]
},
{
"id":"16",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"1255",
"label": "ID"
},
{
"value":"Barbara",
"label": "FirstName"
},
{
"value":"Dorris",
"label": "LastName"
}
]
},
{
"id":"17",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"5555",
"label": "ID"
},
{
"value":"Eugene",
"label": "FirstName"
},
{
"value":"Mark",
"label": "LastName"
}
]
},
{
"id":"18",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"1867",
"label": "ID"
},
{
"value":"Harry",
"label": "FirstName"
},
{
"value":"King",
"label": "LastName"
}
]
},
{
"id":"19",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"45888",
"label": "ID"
},
{
"value":"Lorraine",
"label": "FirstName"
},
{
"value":"Williams",
"label": "LastName"
}
]
},
{
"id":"20",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"4567777",
"label": "ID"
},
{
"value":"Mark",
"label": "FirstName"
},
{
"value":"Sheppard",
"label": "LastName"
}
]
},
{
"id":"21",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"7777",
"label": "ID"
},
{
"value":"Davis",
"label": "FirstName"
},
{
"value":"Sheppard",
"label": "LastName"
}
]
}
]
}
}
}
}
JQGrid Definition
$(document).ready(function () {
$.ajax({
type: "GET",
url: "myjqgrid.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#Pager",
rowNum: 21,
rowList: [21],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'ID',
sortorder: "desc",
sorttype: "text",
sortable: true,
caption: "<h2>MY JQGRID</h2>",
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
cache: true,
loadComplete: function(){
$("td[title = 'Click Me!']").live("click", function(){
$("div.overlay").remove();
var RowID = $(this).closest("tr").attr("id");
if ($(this).siblings("div").length == 0) {
$(this).closest("td").append("<div class='overlay' id='"+RowID+"'>This is an overlay.</div>");
$(this).siblings("div#" + RowID).css("display", "block");
}
})
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
}
});
});
PROBLEM THAT I AM HAVING
-
the pagination works fine when I resize the grid if I don’t change the CSS
-
if I change the CSS FROM
.ui-jqgrid .ui-jqgrid-bdiv {overflow: auto;}TO.ui-jqgrid .ui-jqgrid-bdiv {overflow: inherit !important;}, the pagination bar flows between the records -
the reason I am changing the CSS is because I have an overlay that is displayed when I click on “Click Me!” link in the second column of every row. Changing the CSS displays the overlay correctly for the last record on the page. If I don’t change the CSS, the overlay for the last record on the page is hidden.
Thus,
I do not change the CSS
- pagination works fine when I resize the grid
- the overlay for the last record on the page is hidden
I change the CSS
- pagination bar is displayed between the records when I resize the grid
- the overlay for the last records on the page is displayed correctly
I tried using CSS positioning and z-index for the overlay but it didn’t work.
If I understand you correctly you need do something like the following
instead of the code in the
loadComplete. Important is that the code above append the div to<body>instead of<td>element. One can just use theeventof the click to place the div in the corresponding position.See the demo here.
You can easy modify the code to use the content of the div depend on the
rowid,cellcontentor any other criteria.By the way. In the HTML code which you use you should use
<!DOCTYPE html ...before<html>and usetype="text/css"attribute in the<style>. jqGrid has nocache: trueoption.