techlead
Reputation: 779
jqgrid - resize and overlay
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 recordsthe 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.
Upvotes: 0
Views: 1794
Answers (1)
Oleg
Reputation: 221997
If I understand you correctly you need do something like the following
onCellSelect: function (rowid, iCol, cellcontent, e) {
$("#myoverlay").remove();
if (this.p.colModel[iCol].name === 'Overlay') { // iCol === 1
$('<div class="overlay" id="myoverlay">This is an overlay.</div>').css({
top: e.pageY,
left: e.pageX
}).appendTo('body');
}
}
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 the event of 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, cellcontent or any other criteria.
By the way. In the HTML code which you use you should use <!DOCTYPE html ... before <html> and use type="text/css" attribute in the <style>. jqGrid has no cache: true option.
Upvotes: 1
Related Questions
- How to dynamically resize jqgrid to current window size?
- Resize jqGrid according to number of columns in the grid
- jqgrid resizable
- FreeJqGrid : How to resize the whole grid after a .show() event
- Jqgrid is not resizing as the resolution changes
- How to Expand/Shrink row in Jqgrid dynamically
- Resize jqGrid when browser is resized?
- Resize SubGrid Columns on resizing main grid
- JQGrid: Resize Grid Width After Column Resized
- jqGrid - column resize event