Dynamic JqGrid with JSON Data

Hi I am sharing integration of Jqgrid into liferay plugin potlet.

 Click The following link to down load JqGrid Portlet.
Download


1) Create plugin portlet using Liferay IDE
2) Write service.xml according to ypur requirement

<service-builder package-path="com.meera">
<author>meera</author>
<namespace>jqgrid</namespace>
<entity name="Invheader" local-service="true" remote-service="true">
<!-- PK fields -->
<column name="invId" type="long" primary="true" />
<!-- Audit fields -->
<column name="name" type="String" />
<column name="ammount" type="long" />
<column name="tax" type="long" />
<column name="total" type="long" />
<column name="notes" type="String" />
</entity>
</service-builder>


3) run service builder and you will get related data bese service clasess.
4)write custom method in EntityLocalServiceImpl.java

public class InvheaderLocalServiceImpl extends InvheaderLocalServiceBaseImpl {

public List<Invheader> getAllRecords() throws SystemException{
return InvheaderUtil.findAll();

}
}


5) Run service builder with ant build-service or from IDE ant view you will get method in EntitylocalServiceUtil
6) Implement serveResource(.....) in portlet class in the following way

package com.test;

import java.io.IOException;
import java.util.List;

import javax.portlet.PortletException;
import javax.portlet.ResourceRequest;
import javax.portlet.ResourceResponse;

import com.liferay.portal.kernel.exception.SystemException;
import com.liferay.portal.kernel.json.JSONArray;
import com.liferay.portal.kernel.json.JSONFactoryUtil;
import com.liferay.portal.kernel.json.JSONObject;
import com.liferay.util.bridges.mvc.MVCPortlet;
import com.meera.model.Invheader;
import com.meera.service.InvheaderLocalServiceUtil;

/**
 * Portlet implementation class JQGridAction
 */
public class JQGridAction extends MVCPortlet {

public void serveResource(
ResourceRequest resourceRequest, ResourceResponse resourceResponse)
throws IOException, PortletException {

String jspPage = resourceRequest.getParameter("name");
System.out.println("jspPage"+jspPage);
try {
List<Invheader> objectList=InvheaderLocalServiceUtil.getAllRecords();
JSONObject recordsjsonObject=JSONFactoryUtil.createJSONObject();
JSONArray rowjsonObject=null;
JSONObject cell=null;
JSONArray recordsjsonArray=JSONFactoryUtil.createJSONArray();
recordsjsonObject.put("page","1");
double total_pages = Math.ceil(objectList.size()/10);
recordsjsonObject.put("total",String.valueOf(total_pages));
recordsjsonObject.put("records ", String.valueOf(objectList.size()));
if(!objectList.isEmpty()){
for(int i=0;i<objectList.size();i++){

Invheader invheaderObject=objectList.get(i);
rowjsonObject=JSONFactoryUtil.createJSONArray();
cell=JSONFactoryUtil.createJSONObject();
rowjsonObject.put( String.valueOf(invheaderObject.getInvId()));
rowjsonObject.put(String.valueOf(invheaderObject.getName()));
rowjsonObject.put( String.valueOf(invheaderObject.getAmmount()));
rowjsonObject.put( String.valueOf(invheaderObject.getTax()));
rowjsonObject.put( String.valueOf(invheaderObject.getTotal()));
rowjsonObject.put( String.valueOf(invheaderObject.getNotes()));
//recordsjsonArray.put(String.valueOf(invheaderObject.getInvId()));
//
cell.put("id", String.valueOf(invheaderObject.getInvId()));
cell.put("cell",rowjsonObject);
recordsjsonArray.put(cell);

}
//recordsjsonObject.put("id",String.valueOf(invheaderObject.getInvId()));
recordsjsonObject.put("rows",recordsjsonArray);
}
resourceResponse.getWriter().print(recordsjsonObject.toString());
System.out.println(recordsjsonObject.toString());
} catch (SystemException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}
}



7) write view.jsp in the following way

<%@include file="init.jsp"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:resourceURL var="jqGridResourceURL"></portlet:resourceURL>
<portlet:resourceURL var="jqGridFormResourceURL">
<portlet:param name="jspPage" value="/html/jqgridaction/form.jsp"></portlet:param>

</portlet:resourceURL>
<link rel="stylesheet" type="text/css" media="screen" href="<%=renderRequest.getContextPath()%>/themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=renderRequest.getContextPath()%>/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=renderRequest.getContextPath()%>/themes/ui.multiselect.css" />
<script src="renderRequest.getContextPath()/js/datatype.js" type="text/javascript"> </script>
<script src="renderRequest.getContextPath()/js/jquery.js" type="text/javascript"></script>
<script src="renderRequest.getContextPath()/js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="renderRequest.getContextPath()/js/jquery.layout.js" type="text/javascript"></script>
<script src="enderRequest.getContextPath()/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api = true;
jQuery.jgrid.useJSON = true;
</script>
<script src="renderRequest.getContextPath()/js/ui.multiselect.js" type="text/javascript"></script>
<script src="renderRequest.getContextPath()/js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="renderRequest.getContextPath()/js/jquery.tablednd.js" type="text/javascript"></script>
<script src="renderRequest.getContextPath()/js/jquery.contextmenu.js" type="text/javascript"></script>

<table id="list3"></table>
<div id="pager3"></div>
<table id="navgrid"></table>
<div id="pagernav"></div>
<script>
jQuery("#list3").jqGrid({
    url:'<%=jqGridResourceURL.toString()%>',
datatype: "json",
    colNames:['Inv No', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
    {name:'id',index:'id', width:60, sorttype:"int"},
    {name:'name',index:'name', width:100},
    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
    {name:'note',index:'note', width:150, sortable:false}
    ],
    multiselect: true,
    rowNum:20,
    rowList:[10,20,30],
    pager: '#pager3',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    loadonce: true,
    caption: "Load Once Example"
});
jQuery("#list3").jqGrid('navGrid','#pager3',
{edit:false,add:false,del:false},
{},
{},
{},
{multipleSearch:true, multipleGroup:true}
);


</script>


8) Deploy the portlet and you will get JqGrid...
The following are important links to get java script files.

http://www.trirand.com/blog/jqgrid/jqgrid.html
https://github.com/tonytomov/jqGrid
http://www.trirand.com/blog/?cat=1

Share on Google Plus

About Meera Prince

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.