JQGrid in Salesforce

03 maio 2017 / Written by Andreia Antunes / News

Introduction

It is quite likely that, one day, in your professional career as Salesforce developer you will need to visually represent database information on a Visualforce page as part of one requirement in a project you are assigned to. At that point, you will realize that there are several ways of making it possible. One of them is by using JQGrid. In this article you are going to learn how easy it is to integrate JQGrid in Salesforce.

Introduction

JQGrid

JQGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Compared with other JQuery grid plug-ins, JQGrid has several advantages over them such as:

Documentation: Unlike some of the other jQuery grid plug-ins, JQGrid has decent documentation and many demos with a variety of source code examples.
Multiple data edition models: JQGrid supports three different models for editing data within the grid: Single-cell editing, in-line row editing, and editing within a pop-up form.
Performance: JQGrid works great with large amounts of data by taking advantage of the new rendering engine which improves the loading speed in some cases up to 5-10 times faster than previous releases. Besides that, the Paging feature enable developer to display data page by page and control how many rows are displayed at a time. This way, data will not be retrieved from the server until the end user comes to that page.
Coding: JQGrid supports most of the basic grid functionalities. Therefore, there is no need to code for features such as: sorting of columns, pagination or formatting some data depending on their values.
Modular: You are able to choose what modules you need, avoiding bloat.
Cross Browser: JQGrid supports the following browsers: IE 6.0 , FireFox 2.0 , Safari 3.0 , Opera 9.2 and Google Chrome.
Multiple data sources: JQGrid supports JSON, XML and arrays as data sources. Moreover, you can even define your own custom data type.
Seamless Integration: Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, .NET, Salesforce or Perl.
Fast debugging: Tracing through the grid source code is quite easy and fast to do by using debugging tools like Firebug or even the developer tool in your browser, which is useful for figuring out things which are not quite covered by the documentation.
SubGrids: Using a SubGrid is the easiest method for displaying data from child records.
SubGrid as Grid: In this alternative to a subGrid, we use the subGrid functions of the main grid to create not a subGrid, but another grid, with all the power and capacity of the main grid but appearing, as before, under the “parent” record with the same ability to reveal and hide it.

Custom formatter: The developer can define your own custom formatter by doing something like this:

j$(function () {
	    "use strict";
	    j$("#gridDocument").jqGrid({
	    	(…)
	        colModel: [
	            { name: "Name", width:500, sortable: false,align:"left",formatter: linkObject },
                  (…)
          });
          function linkObject(cellValue, options, rowdata)	{
	    	// add you code here
	    }
}

Yet, it has some drawbacks as well:

Variable names in the source code use a lot of single letter and two letter abbreviations. This is quite common in JavaScript libraries, making them not so readable.
Despite the availability of both free and paid support, there is not a commercial company standing behind the grid. Thus, don't expect whether round-the-clock support or a toll-free phone number.

Integrating JQGrid with Salesforce

In Salesforce, the implementation of JQGrid is quite simple. Basically, all you need to do is described in the following steps:

Create a VF Page as follows. This page will be used as the grid user interface.

<apex:page standardController="Account" extensions="CS_ContactPageController">

<link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/JavaScript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/JavaScript">

	var j$ = jQuery.noConflict();
    var localurl = window.location.href;
    
	var contactsjsonDocument = {!contactsjsonDocument};

	j$(function () {
	    "use strict";
	    j$("#gridDocument").jqGrid({
	    	sortable: false,
	    	multiselect: true,
	    	colNames:['Name','BirthDate', 'MailingStreet', 'Email', 'Level', 'MobilePhone', 'Phone', 'Fax', 'Title'],
	    	colModel: [
	    		{ name: "Name", width:100, sortable: false, align:"left"},
	            { name: "BirthDate", width:100, sortable: false, align:"left"},
	            { name: "MailingStreet", width:175, sortable: false, align:"left"},
	            { name: "Email", width:100, sortable: false, align:"left"},
	            { name: "Level", width:100, sortable: false, align:"left"},
	            { name: "MobilePhone", width:100, sortable: false, align:"left"},
	            { name: "Phone", width:100, sortable: false, align:"left"},
	            { name: "Fax", width:100, sortable: false, align:"left"},
	            { name: "Title", width:100, sortable: false, align:"left"},
	        ],
	        datatype: 'local',
	    	data: contactsjsonDocument
	    });
	});
</script>
	<apex:form id="form">
		<apex:pageBlock title="" mode="maindetail" id="pageBlock">
    			<apex:pageBlockSection collapsible="false" rendered="true">              
        		<div id="response" style="font-size: 16px;width: 300px;font-family: monospace; font-stretch: expanded" />              
        			<table id="gridDocument"></table>
        		<div id="ppdata"></div>
    		</apex:pageBlocksection>
		</apex:pageBlock>
	</apex:form>
</apex:page>

NOTE: The setup and configuration of JQGrid are controlled by setting options for the grid. In the above example, only some of them were used. A list with all possible options and more detail of each one can be found here.

Create a server-side controller in Apex as below. Since JQGrid is a pure JavaScript solution it can’t have direct access to the metadata. Therefore, it is on the server side (controller) where all the required information will be generated and passed to the JQGrid.

global class CS_ContactPageController {
	
	public String contactsjsonDocument { get; set; }
	
    public CS_ContactPageController(ApexPages.StandardController controller) {
		Id accountId = null;

		if(ApexPages.currentPage().getParameters().get('id') != null){

            Id objId = ApexPages.currentPage().getParameters().get('id');
            
            accountId = (objId.getSObjectType().getDescribe().getName() == 'Opportunity') ? 
            		[SELECT AccountId FROM Opportunity WHERE Id = :objId].AccountId : objId;
            
            Account acc = [select id, name from Account where id = : accountId];
            showContacts(acc.Name);
		}
    }
    
	public void showContacts(String accName){
        accName = '%'  accName '%';
        List lst_contacts = [select id, Name, Birthdate, MailingStreet, Email, Level__c, MobilePhone, Phone, Fax, Title 
        							  from contact 
        							  where Account.Name LIKE : accName];
        
        
        JSONGenerator genDoc = JSON.createGenerator(true);
        for(Contact cont : lst_contacts) {
        	genDoc.writeStartObject();
        	genDoc.writeStringField('Name', cont.Name);
        	genDoc.writeStringField('BirthDate', cont.Birthdate.format());
        	genDoc.writeStringField('MailingStreet', cont.MailingStreet);
			genDoc.writeStringField('Email', cont.Email);
			genDoc.writeStringField('Level', cont.Level__c);
			genDoc.writeStringField('MobilePhone', cont.MobilePhone);
			genDoc.writeStringField('Phone', cont.Phone);
			genDoc.writeStringField('Fax', cont.Fax);
			genDoc.writeStringField('Title', cont.Title);
        	genDoc.writeEndObject();
        }
        
        contactsjsonDocument = genDoc.getAsString();
        contactsjsonDocument = '['   contactsjsonDocument.replace('} {','},{')   ']';
        
    }
}

The output result of the above example is as follows:

Picture1 cc