how to render data in a jqgrid

abogarill

unread,

Sep 7, 2010, 6:42:02 PM9/7/10

to play-framework

Hi, I'm trying to put a jqgrid in my project and I having problems
with the controller.

This is my view "grid.html":
<link rel="stylesheet" type="text/css" media="screen" href="@{'/
public/stylesheets/jquery-ui-1.8.2.custom.css'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/
public/stylesheets/ui.jqgrid.css'}" />
<script type="text/javascript" src="/public/javascripts/
jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="/public/javascripts/grid.locale-
en.js"></script>
<script type="text/javascript" src="/public/javascripts/
jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/public/javascripts/jquery-
ui-1.8.2.custom.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#tablenames").jqGrid({
url: '/application/getGrid',
datatype: 'xml',
mtype: 'GET',
colNames: ['id', 'name', 'surname'],
colModel: [
{ index: 'id', name:'id', hidden: 'true' },
{ index: 'name', name:'name', align: 'center'},
{ index: 'surname', name:'surname', align: 'center' },
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'name',
sortorder: 'asc',
viewrecords: true,
caption: 'Names',
height: 300,
width: 400
});
jQuery("#tablenames").jqGrid('navGrid','#pager',
{edit:true,add:true,del:true});
});
</script>

<body>
<table id="tablenames"></table>
<div id="pager"></div>
</body>

And the controller ...

public static void grid() {
render();
}

public static void getGrid(Long id) {
String xml ="<?xml version=\"1.0\" encoding=\"utf-8\"?>";
xml += "<rows>";
xml += "<row id='1'>";
xml +="<cell>1</cell>";
xml +="<cell>Adrian</cell>";
xml +="<cell>Bogarill</cell>";
xml +="</row>";
xml += "<row id='2'>";
xml +="<cell>2</cell>";
xml +="<cell>Lola</cell>";
xml +="<cell>Flores</cell>";
xml +="</row>";
xml += "</rows>";
render(xml);
}

PD: I tried to put this in the view: datatype: 'json' and this in the
controller: render(JSON.toJSON(xml));
but it doesn't work.
I think that the call of getGrid() is not correct but I don't know why

green

unread,

Sep 7, 2010, 7:00:45 PM9/7/10

to play-fr...@googlegroups.com

try renderText, renderXML or renderJSON depends on your string format

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To post to this group, send email to play-fr...@googlegroups.com.
To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.

abogarill

unread,

Sep 8, 2010, 2:05:35 PM9/8/10

to play-framework

Ok, i will try to do this but now my problem is that the call to URL
doesn't work :S
Firstable I need to call any function to fill the data in the grid.
I am writing:

jQuery(document).ready(function() {
jQuery("#tablenames").jqGrid({
url: '/application/getGrid',

...
and:
jQuery(document).ready(function() {
jQuery("#tablenames").jqGrid({
url: '@{Application.getGrid()}',
...

Nothing works

On 8 sep, 00:00, green <greenlaw...@gmail.com> wrote:
> try renderText, renderXML or renderJSON depends on your string format
>

> > play-framewor...@googlegroups.com<play-framework%2Bunsu...@googlegroups.com>
> > .

abogarill

unread,

Sep 8, 2010, 3:49:52 PM9/8/10

to play-framework

If I put a data.xml with this example, it's works!!! but not with an
URL to fill data from DDBB for example.

data.xml :
<?xml version="1.0" encoding="UTF-8"?>
<rows>
<row id='1'>
<cell>1</cell>
<cell>Adrian</cell>
<cell>Bogarill</cell>
</row>
<row id='2'>
<cell>2</cell>
<cell>Lola</cell>
<cell>Flores</cell>
</row>
</rows>

Please, I need your help.

dirk

unread,

Sep 8, 2010, 5:27:30 PM9/8/10

to play-fr...@googlegroups.com

Try this:
http://www.playframework.org/documentation/1.0.3/tags#ajsActiona

To unsubscribe from this group, send email to play-framewor...@googlegroups.com.

Kosta

unread,

Sep 8, 2010, 5:54:50 PM9/8/10

to play-framework

I have a fairly complex jqGrid implementation backed by Play! and I
personally use the @{} notation for specifying controller URLs.

Here is a snippet:

$("#datagrid").jqGrid({
url: '@{Drops.myActiveProjectsJSON}',
datatype: "json",
height: 260,
rowNum: 10,
rowList: [10,20,30],
colNames:['Name', 'Date', 'User'],
colModel:[ {name:'name', index:'name'},
{name:'timestamp', index:'timestamp', sorttype:"date",
formatter:"date", formatoptions:{newformat: 'd M Y H:i'}},
{name:'user', index:'user'} ],
pager: "#pdatagrid",
toolbar: [true, "top"],
viewrecords: true,
shrinkToFit: true,
autowidth: true,
sortname: 'timestamp',
sortorder: 'desc',
onSelectRow: function(id){
$("#btndetails").button("enable");
$("#btndelete").button("enable");
}
});

Hope that helps! :) Although to be perfectly honest I suspect your
problem might be in the fact that your JSON isn't correctly formatted
for jqGrid. It took me a bit of time to get it exactly right. You'll
be best off creating wrapper classes for JSON data.

> > > > play-framewor...@googlegroups.com<play-framework%2Bunsubscribe@go oglegroups.com>
> > <play-framework%2Bunsu...@googlegroups.com<play-framework%252Bunsubscri b...@googlegroups.com>

>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/play-framework?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "play-framework" group.
> > To post to this group, send email to play-fr...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > play-framewor...@googlegroups.com<play-framework%2Bunsubscribe@go oglegroups.com>

abogarill

unread,

Sep 9, 2010, 11:53:32 AM9/9/10

to play-framework

Thanks for help !!! it's works

Reply all

Reply to author

Forward