Dima R. Dima R. - 1 year ago 117
jQuery Question

jqGrid with Struts 2

I need to display a grid, with having Struts2 on a back end.
I have a class

representing the data, in which I created a method
that is to return
(using Google GSON framework)

At the end of the day I get empty grid, seen on the picture.

Here are the details:

public class Tuple implements Serializable{
//other methods here..
public JsonObject toJson() {
//create JSON referemce
jSonRef = new JsonObject();
jSonRef.add("ProposalId", new JsonPrimitive( m_lngProposalId) );
jSonRef.add("ProposalLabel", new JsonPrimitive(m_strProposalLabel) );
jSonRef.add("AnalysisStatus", new JsonPrimitive(m_strAnalysisStatus) );

jSonRef.add("lockedBy", m_strLockedBy!=null? new
JsonPrimitive(m_strLockedBy): new JsonPrimitive("") );

return jSonRef ;
// other stuff here ...
}//end of the class

is a member variable of the class.

is like this:

<action name="JsonGetter" class="com.bvn.ecost.framework.actions.JSonGetterAction">
<result name="success" type="json"/>

The action class is:

package com.bvn.ecost.framework.actions;

import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import com.google.gson.JsonArray;
import com.opensymphony.xwork2.Action;

public class JSonGetterAction extends SuperAction{ //extends SuperAction
private static final Logger log = LogManager.getLogger(ReportDealAction.class);
private String results = null ;

public String execute() {
JsonArray propsArray = loadProposalsJson() //method from superclass, returning
results = propsArray.toString() ;

return Action.SUCCESS ;

public String getResults() {
return results;

public void setResults(String results) {
this.results = results;

JSP page:

<%@ page trimDirectiveWhitespaces="true" %>
<%@ page language="java" %>
<%@ page import="com.bvn.ecost.*" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="java.sql.Connection" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
try {

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<HTML xmlns="http://www.w3.org/1999/xhtml" >
<link rel="stylesheet" type="text/css" href="css/mainStyles.css" />
<link type="text/css" href="css/redmond/jquery-ui-1.8.23.custom.css" media="screen"
rel="stylesheet" />
<link type="text/css" href="css/ui.jqgrid.css" media="screen" rel="stylesheet" />
<link type="text/css" href="css/jquery.loadmask.css" media="screen" rel="stylesheet" />
<link type="text/css" href="css/ui.app.css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="js/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.loadmask.js"></script>
<script type="text/javascript" src="js/app-helper.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$.getJSON('JsonGetter.action', function(data) {
alert("Inside .getJson()") ;
console.log("data->results: "+data.results) ;
var this_grid;
this_grid = $this_app.define_grid("#grid-results", {
caption: 'Proposal Grid',
pager: '#pager-results',
data: $.extend(true, [], data.results),
datatype: "local",
colModel: [
{ name: 'ProposalId', index: 'ProposalId', width: 120, label: 'Proposal Id' },
{ name: 'ProposalLabel', index: 'ProposalLabel', width: 120, label: 'Label' },
{ name: 'AnalysisStatus', index: 'AnalysisStatus', width: 120, label: 'Status' },
{ name: 'lockedBy', index: 'lockedBy', width: 440, label: 'Locked by' }
inline_editing: false,
pager_options: {
del: false
) <!-- end of getJSon() -->

<table align="center" width="100%"> <!-- Wrapper table -->
<table align="center" width="100%"> <!-- Header image table -->
<jsp:include page="commonHead.jsp" flush="true" />
<td colspan="10" align="center" style="color:#00509e">
<b><s:property value="statusString"/></b>
<table align="center" width="60%">
<tr align="center">
<TD align="left">
<div id="div-results">
<table id="grid-results">

<div id="pager-results">
<span id="results-status-message"></span>
catch (Exception e) {
Helper.handleException(e, request, response, out);

I am getting complete page, but empty grid:

empty grid

The line "console.log("data->results: "+data.results) ;"
shows the Json in the browser JavaScript console, like this:

data->results: [{"ProposalId":35145,"ProposalLabel":"US Laminating Corp 1","AnalysisStatus":"WIP","lockedBy":"cost-analyzer-admin"}]

I understand that it could be somehow incorrect, but do not know how.
Also, I tried to have a results variable in the action as JsonObject
(and changing the way it obtains a value to this)

results.add("result", propsArray) ;

And then changing the JSP line with specifying data: to be like:

data: $.extend(true, [], data.results.result),

But I get some kind of
in the browser.

Answer Source

You are getting JSON object via the json plugin that serializes all action properties, that might be not necessary to get the grid model. Why not to create a grid model object and return it serialized to JSON by specifying the root parameter of the result. Anyway misunderstanding a difference between the stringified version of JSON and JSON object don't let you apply a JSON object to the grid. With the results field you have gotten a stringified JSON that needs to parse to a JSON object like $.parseJSON(data); then apply it to the grid model.

Not necessary, If you are using Struts 2 why not to use struts2-jquery-plugin and make grids more easier like described here.

This question also could be helpful to resolve this issue.