jQWidgets Forums

Tagged: jqxgrid data population

This topic contains 0 replies, has 1 voice, and was last updated by Eldho 11 years, 3 months ago.

Viewing 1 post (of 1 total)

Author

How to Fill the grid with json data from spring controller Posts
March 10, 2014 at 10:38 am How to Fill the grid with json data from spring controller #50765

Eldho
Participant

I am trying to fill the grid with the json data response from spring controller class below:
package com.gerrytan.pizzashop;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
@Controller
@RequestMapping(value=”/account”)
public class AccountsController {
@Autowired
private AccountService accountService;
@Autowired
private AccountDAO accountDao;
@RequestMapping(value=”/list”,method = RequestMethod.GET,produces=”application/json”)
@ResponseBody
public Map<String, Object> getAccounts(Map<String, Object> map) {
map.put(“all_item_issue_headers”, accountDao.getAccounts());
return map;
}
}
I need to display the data response from this controller class to a grid using the JQWidgets plugins.My jsp code is :
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<%@page language=”java” contentType=”text/html;charset=ISO-8859-1″ pageEncoding=”ISO-8859-1″%>
<%@ taglib uri=”http://java.sun.com/jsp/jstl/core” prefix=”c” %>
<%@ taglib prefix=”spring” uri=”http://www.springframework.org/tags” %>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title id=”Description”>Stock Details</title>
<link rel=”stylesheet” href=”<c:url value=”/resources/js/jqx.css” />” type=”text/css”>
<link rel=”stylesheet” href=”<c:url value=”/resources/js/jqx.summer.css” />” type=”text/css”>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jquery-1.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxcore.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxbuttongroup.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxradiobutton.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxdata.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxbuttons.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxscrollbar.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxmenu.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxgrid_002.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxgrid.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxgrid_003.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxlistbox.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxdropdownlist.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxgrid.filter.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxexpander.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxcheckbox.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxcalendar.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxnumberinput.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxwindow.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxdatetimeinput.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxmaskedinput.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/globalize.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxgrid.pager.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxtooltip.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxgrid.sort.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/demos.js” />”></script>
<link rel=”stylesheet” href=”<c:url value=”/resources/js/jqx_002.css” />” media=”screen”>
<script type=”text/javascript” src=”<c:url value=”/resources/js/generatedata.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxgrid.selection.js” />”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/js/jqxgrid.aggregates.js” />”></script>

</head>
<body>
<div id=”header” style=”height:20%;background-color:cyan;”><br></br></div>
<div id=”content” style=”float:left”>
<script type=”text/javascript”>

$(document).ready(function () {
// prepare the data
document.getElementById(‘bttn’).style.display=’block’;
var source =
{
datatype: “json”,
type:”GET”,
url: “account/list”,
datafields: [
{ name: ‘id’ },
{ name: ‘periodname’ },
{ name: ‘startdate’ },
{ name: ‘enddate’ },
{ name: ‘isactive’ }
],
sort: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},

id: ‘id’
};
var dataAdapter = new $.jqx.dataAdapter(source, {loadError: function (xhr, status, error) {
alert(error);
}
});

$(“#jqxgrid”).jqxGrid(
{
width: 800,
source: dataAdapter,
pageable: true,
autoheight: true,
columns: [
{ text: ‘Period Name’, datafield: ‘periodname’, width: 200 },
{ text: ‘Start Date’, datafield: ‘startdate’, width: 200 },
{ text: ‘End Date’, datafield: ‘enddate’, width: 200 },
{ text: ‘Active’, datafield: ‘isactive’, width: 200 }
]
});
});
</script>
<div id=”jqxWidget” style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”>
<div id=”pagerjqxgrid”></div>
</div>
</div>
<div id=”bttn” style=”margin-right: 565px; clear: both;height:25px;background-color:#eeaa11;display:none;”>
<div>
<input id=”addrowbutton” type=”button” value=”Add” style=”margin-left: 50px; float: left;”/>
</div>
<div style=”margin-top: 10px;”>
<input id=”deleterowbutton” type=”button” value=”Delete” style=”margin-left: 25px; float: left;”/>
</div>
<div style=”margin-top: 10px;”>
<input id=”updaterowbutton” type=”button” value=”Update” style=”margin-left: 25px; float: left;”/>
</div>
</div>
</div>
<div id=”footer” style=”height:20%;background-color:cyan;”><br></br></div>
</body>
</html>
But here i didn’t got the data on grid.I only got the grid structure as result.And got the error message as ‘Not Found’.
Please help me out in getting to the solution.
Author

Posts

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.