Forum
Log In
Home
Topic RSS
Related Topics
04:36
02/01/2013
Offline
Hi Guys,
My data is displayed for the main grid but not the subgrid when i pass the information from the controller to the view. This is the json data response passed:
{"records":"1","total":"1","page":"1","rows":[{"id":"1","cell":["cell11","cell12","cell13"]},{"id":"2","cell":["cell21","cell22","cell23"]}]}
Below are my controller and view codes.
SubGridController.groovy
import grails.converters.JSON
class SubGridController {
def index = { }
def indexJSON = {
println "Entering indexJSON..."
def formattedList = []
def myGridData=[:]
myGridData.put("id", "1")
myGridData.put("cell",["cell11", "cell12", "cell13"])
myGridData=[:]
myGridData.put("id", "2")
myGridData.put("cell",["cell21", "cell22", "cell23"])
formattedList << myGridData
println 'formatted list => '+formattedList
def data = [records: '1', total: '1', page: '1', rows: formattedList]
println 'data => ' + data
render data as JSON
println "Exiting indexJSON..."
}
}
index.gsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js%22%3E%3C/script"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js%22%3E%3C/script"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js%22%3E%3C/script"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js%22%3E%3C/script"></script>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint browser: true */
jQuery(document).ready(function() {
jQuery(document).bind("contextmenu",function(e){
return false;
});
jQuery(document).select(function(){
return false
});
jQuery("#customerDialerTable").jqGrid({
url:"${createLink(controller:'subGrid', action:'indexJSON')}",
jsonReader:{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems:true,
cell: "cell",
id:"id",
subgrid: {root:"rows",
repeatitems: true,
cell:"cell"
}
},
datatype: 'json',
colNames: ['ID', 'Column 1'],
colModel: [
{name:'id', index:'id', align:'center', jsonmap:'id', sortable:true,width:'30%'},
{name:'col1', index:'col1', align:'center', jsonmap:'cell', sortable:true,width:'30%'}
],
align:'center',
sortname: 'id',
sortorder: 'desc',
height: 'auto',
autowidth:true,
pager: '#customerDialerPage',
caption:'Testing',
scroll: false,
scrollOffset:'0',
rowNum:8,
rowList:[8,20,50],
viewrecords: true,
subGrid: true,
subGridModel :
{
name : ['No', 'Item']
}
});
});
</script>
</head>
<body>
<div class="box" style="text-align: center;">
<br /> <br />
<div id="table">
<table id="customerDialerTable"></table>
<div id="customerDialerPage"></div>
</div>
<!-- div id="table" -->
<br />
</div>
<!-- div id="box" -->
<div id="progressDialog" title="Loading...">
<p>Please Wait..</p>
<div id="progressBar"></div>
<!-- div id="progressDialog" -->
</div>
</body>
</html>
Thanks all for the help as i'm rather new to jquery/jqgrid 🙂
Most Users Ever Online: 715
Currently Online:
31 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
