Liferay Development

Liferay Consulting

Liferay Training

Your Trusted Liferay Solutions Partner

Monday, September 24, 2012

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



Location: Hyderabad, Andhra Pradesh, India

2 comments :

  1. The effectiveness of IEEE Project Domains depends very much on the situation in which they are applied. In order to further improve IEEE Final Year Project Domains practices we need to explicitly describe and utilise our knowledge about software domains of software engineering Final Year Project Domains for CSE technologies. This paper suggests a modelling formalism for supporting systematic reuse of software engineering technologies during planning of software projects and improvement programmes in Project Centers in Chennai for CSE.

    Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining the authors explore the idea of using Java in Big Data platforms.
    Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

    ReplyDelete

Recent Posts

Recent Posts Widget

Popular Posts