jQuery Grid Plugin - jqGridForum

25/01/2011
06:17

nobel

Vellore, India

Member

Members

Forum Posts: 8

Member Since:
25/01/2011

Offline

1

Hi,

I have refered the site: http://trirand.com/blog/jqgrid.....qgrid.html. I want to build a Grid for my project officially. Here, They have given sample sources along with the *.php in order to bring db data. I am trying to use *.jsp instead of *.php.

I have tried to build a jqGrid along with jsp. But, i come across Number Format Exception. I submit my code as follows:

1. index.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sample JQuery Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

</head>
<body>
   <table id="list5" class="scroll" cellpadding="0" cellspacing="0"></table>
   <div id="pager5" class="scroll" style="text-align:center;"></div>
   <table id="list5" class="scroll" cellpadding="0" cellspacing="0"></table>
   <div id="pager5" class="scroll" style="text-align:center;"></div>
   <br />

   <a href="#" id="a1">Get data from selected row</a>
   <br />

   <a href="#" id="a2">Delete row 2</a>
   <br />

   <a href="#" id="a3">Update amounts in row 1</a>
   <br />

   <a href="#" id="a4">Add row with id 99</a>

   <script src="manipex.js" type="text/javascript"> </script>
   <br />
</body>
</html>

2. manipex.js:

jQuery("#list5").jqGrid({
    url:'griddata.jsp',
   datatype: "json",
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'invdate',index:'invdate', width:90},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right"},
        {name:'tax',index:'tax', width:80, align:"right"},
        {name:'total',index:'total', width:80,align:"right"},
        {name:'note',index:'note', width:150, sortable:false}
    ],
    rowNum:10,
    rowList:[4,8,12],
    imgpath: "themes/basic/images",
    pager: jQuery('#pager5'),
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"Invoice Data"
}).navGrid("#pager5",{edit:false,add:false,del:false});

jQuery("#a1").click( function(){
   var id = jQuery("#list5").getGridParam('selrow');
   if (id)   {
       var ret = jQuery("#list5").getRowData(id);
       alert("id="+ret.id+" invdate="+ret.invdate+"...");
   } else { alert("Please select row");}
});

jQuery("#a2").click( function(){
var su=jQuery("#list5").delRowData(12);
if(su) alert("Succes. Write custom code to delete row from server"); else alert("Allready deleted or not in list");
});

jQuery("#a3").click( function(){
var su=jQuery("#list5").setRowData(11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"});
if(su) alert("Succes. Write custom code to update row in server"); else alert("Can not update");
});

jQuery("#a4").click( function(){
   var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
   var su=jQuery("#list5").addRowData(99,datarow);
   if(su) alert("Succes. Write custom code to add data in server"); else alert("Can not update");
});

3. griddata.jsp:

<%@ page import="java.sql.*,java.util.ArrayList" language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="net.sf.json.JSONObject"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Invoice Grid</title>
</head>
<body>
   <%
       String rows=request.getParameter("rows");
       String pageno=request.getParameter("page");
       System.out.println("Rows & Page : "+ rows+ "    "+ pageno);
       String cpage=pageno;
       Connection connect = null;
       Statement statement = null;
       PreparedStatement preparedStatement = null;
       ResultSet rs= null;
       Class.forName("com.mysql.jdbc.Driver").newInstance();
       connect = DriverManager.getConnection("jdbc:mysql://localhost/test?user=root&password=root");
       statement = connect.createStatement();
       rs = statement.executeQuery("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE a.client_id=b.client_id");
       int count=0;
       rs.last();
       count=rs.getInt(1);
       System.out.println("Total No of Records are : "+count);

       int pageval=0;
       pageval=(count/Integer.parseInt(rows));
       int limitstart=0;
       limitstart=(Integer.parseInt(rows)*Integer.parseInt(pageno))-Integer.parseInt(rows);
       int total=count/Integer.parseInt(rows);
       System.out.println("Limit Start : "+limitstart);
       System.out.println("Total : "+total);
       String totalrow=String.valueOf(total+1);
       System.out.println("Total Row : "+totalrow);
       rs = statement.executeQuery("SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id ORDER BY b.name LIMIT "+limitstart+","+rows);
       //rs = statement.executeQuery("SELECT * FROM grid limit "+limitstart+","+rows);
       JSONObject responcedata=new JSONObject();
       net.sf.json.JSONArray cellarray=new net.sf.json.JSONArray();
       responcedata.put("total",totalrow);
       responcedata.put("page",cpage);
       responcedata.put("records",count);
       net.sf.json.JSONArray cell = new net.sf.json.JSONArray();
       net.sf.json.JSONObject cellobj=new net.sf.json.JSONObject();
       int i=1;
       while(rs.next())
       {
           //System.out.println("Row#: "+i+"      ##"+rs.getString(1)+" : "+rs.getString(2)+" : "+rs.getString(3)+" : "+rs.getString(4)+" : "+rs.getString(5)+" : "+rs.getString(6)+" : "+rs.getString(7)+" : ");
           cellobj.put("id",rs.getInt(1));
           cell.add(rs.getInt(1));
           cell.add(rs.getString(2));
           cell.add(rs.getString(3));
           cell.add(rs.getDouble(4));
           cell.add(rs.getDouble(5));
           cell.add(rs.getDouble(6));
           cell.add(rs.getString(7));
           cellobj.put("cell",cell);
           cell.clear();
           cellarray.add(cellobj);
           i++;
       }
       responcedata.put("rows",cellarray);
       out.println(responcedata);
       System.out.println("Response Data : "+responcedata);
   %>

</body>
</html>

Can anybody help me? If you have a sample project which uses jqGrid along with JSP, It will be very helpful for me.

Thanks in advance,

Nobel.

02/03/2011
18:30

brycekmartin

Member

Members

Forum Posts: 22

Member Since:
08/01/2009

Offline

2

Hey Nobel,

Do you still need help on this??

I have used jqGrid with JSP. What exactly are the errors you are getting? Are they JS or Java based? Are you using Servlets and Beans for data passing?

Thanks
Bryce

25/08/2011
21:04

empire

New Member

Members

Forum Posts: 2

Member Since:
25/08/2011

Offline

3

Hi Nobel I also tried the same example and got the same exception "Error 500: java.lang.NumberFormatException: null".

Did you find the solution for this exception ?

Bryce were you able to run this ?

Thank you

Empire

25/08/2011
22:35

empire

New Member

Members

Forum Posts: 2

Member Since:
25/08/2011

Offline

4

I was able to resolve this exception(it was because JSON object was not building in proper format). but now I can not display the grid.

I also changed the grid model in java script according to database values now I have no error but everything is blank as we have not given in html where to pring the grid.

anybody ?

..

Empire