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

6 comments :

  1. Replies
    1. Great Article IoT Projects for Students

      Deep Learning Projects for Final Year

      JavaScript Training in Chennai

      JavaScript Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete

  2. It's very useful article with inforamtive and insightful content and i had good experience with this information. We, at the CRS info solutions ,help candidates in acquiring certificates, master interview questions, and prepare brilliant resumes.Go through some helpful and rich content Salesforce Admin syllabus from learn in real time team. This Salesforce Development syllabus is 100% practical and highly worth reading. Recently i have gone through Salesforce Development syllabus and Salesforce Admin syllabus which includes Salesforce training in USA so practically designed.

    ReplyDelete
  3. Check for how long the company have followed a dedicated Salesforce practice Salesforce training in Hyderabad

    ReplyDelete
  4. Thank you for sharing the valuable information.
    learn pega rpa
    pega rpa course

    ReplyDelete

Recent Posts

Recent Posts Widget

Popular Posts