Grid not displaying from spring controller response

StackOverflow https://stackoverflow.com/questions/22246467

  •  10-06-2023
  •  | 
  •  

Question

I need to display a grid using JQWidgets plugins.I am using spring here.Below is my jsp page index.jsp:

<!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/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/jqxdatetimeinput.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/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="content" style="float:left">
    <script type="text/javascript">
    $(document).ready(function () {
       var source =
                {     
                    datatype: "json",
                    type:"GET",
                    url: "account/list",
                    datafields: [
                        { name: 'id' },
                        { name: 'periodname' },
                        { name: 'startdate' },
                        { name: 'enddate' },
                        { name: 'isactive' }
                    ],
                    id: 'id'
                };

            var dataAdapter = new $.jqx.dataAdapter(source);
     $("#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></body>
</html>

And my spring controller class is AccountsController.java:

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 ModelMap getAccounts(ModelMap model) {
    model.addAttribute("all_item_issue_headers", accountDao.getAccounts());
    System.out.println(model);
    return model;
}

 }

I got the value for model object at the console as:

{all_item_issue_headers=[com.gerrytan.pizzashop.Accounts@a8127, com.gerrytan.pizzashop.Accounts@1a562f5, com.gerrytan.pizzashop.Accounts@103f2db, com.gerrytan.pizzashop.Accounts@3d12a4, com.gerrytan.pizzashop.Accounts@192e8cd, com.gerrytan.pizzashop.Accounts@1f21dcd, com.gerrytan.pizzashop.Accounts@829f8d, com.gerrytan.pizzashop.Accounts@1b922de, com.gerrytan.pizzashop.Accounts@1a03652, com.gerrytan.pizzashop.Accounts@14e7bc5, com.gerrytan.pizzashop.Accounts@19fea29]}

My problem is that i didn't get a grid on display.Only showing the grid structure as result.Is there anything wrong in my code??

Was it helpful?

Solution

Use the below code to solve your problem

@RequestMapping(value="/list",method = RequestMethod.GET,produces="application/json")
@ResponseBody
public String getAccounts() {
try {
    SimpleDateFormat from = new SimpleDateFormat("dd/MM/yyyy");
    SimpleDateFormat to = new SimpleDateFormat("yyyy-MM-dd");
    List <Accounts> list= accountDao.getAccounts();
    JSONArray cellarray = new JSONArray();
    JSONObject cellobj = null;
    for(Accounts accounts:list){
    cellobj = new JSONObject();
    cellobj.put("id", accounts.getId());
    cellobj.put("periodname",accounts.getPeriodname());
    cellobj.put("startdate", from.format(accounts.getStartdate()));
    cellobj.put("enddate",from.format(accounts.getEnddate()));
    cellobj.put("isactive", accounts.getIsactive());
   cellarray.add(cellobj);

}
return cellarray.toString();
}catch(Exception exception){
    System.out.println("error is "+exception);
    return null;
}
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top