JQGrid to display Apache Solr Data

Hi all, from past couple of weeks i was doing a POC on Solr in my project and there came a scenario where i need to pull the data from Solr server and display on JQGrid component. In this post let me show you how to do this task. The project structure looks as below.

jqgrid_project

let’s start with our index.html file as below.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Solr Data Drid</title>
<link href="css/jquery-ui-custom.css" media="screen" type="text/css" rel="stylesheet">
<link href="css/ui.jqgrid.css" media="screen" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="custom_js/app.js"></script>
</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>

Now comes the time for coding the app.js file where the actual logic reside. follow the comments carefully and the script is easy to understand.

/**
 * @author Pavan Kumar Mantha
 */

$(document)
		.ready(
				function() {
					var dataTable = $("#list2");
					var entityArray = [];

					dataTable.jqGrid({
						datatype : "local",
						colNames : [ 'id', 'lastName', 'firstName',
								'titleOfCourtesy' ],
						colModel : [ {
							name : 'id',
							index : 'id',
							width : 55
						}, {
							name : 'lastName',
							index : 'lastName',
							width : 90
						}, {
							name : 'firstName',
							index : 'firstName',
							width : 100
						}, {
							name : 'titleOfCourtesy',
							index : 'titleOfCourtesy',
							width : 80,
							align : "right"
						} ],
						rowNum : 10,
						rowList : [ 10, 20, 30 ],
						pager : '#pager2',
						sortname : 'id',
						viewrecords : true,
						sortorder : "desc",
						autowidth : true,
						caption : "Solr Data"
					});

					// handles the grid resize on window resize
					$(window).resize(
							function() {
								dataTable.jqGrid('setGridWidth', parseInt($(
										window).width()) - 20);
							});

					// Firing Ajax request to Solr server and getting data to
					// populate the jqgrid.
					// This ajax request is powered by cross domain
					$.ajaxSetup({
						crossDomain : true,
						scriptCharset : "utf-8",
						contentType : "jsonp; charset=utf-8"
					});

					var request = $
							.ajax({
								url : "http://localhost:8983/solr/collection1/select?q=*%3A*&wt=json&json.wrf=?&indent=true&rows=100",
								mthod : "GET",
								dataType : "jsonp"
							});

					request.done(function(data) {

						$.each(data.response.docs, function(i, doc) {
							var entityobject = {
								id : "",
								lastName : "",
								firstName : "",
								titleOfCourtesy : ""
							}

							entityobject.id = doc.id;
							entityobject.lastName = doc.lastName;
							entityobject.firstName = doc.firstName;
							entityobject.titleOfCourtesy = doc.titleOfCourtesy;

							entityArray.push(entityobject);
						});

						for (var i = 0; i <= entityArray.length; i++)
							jQuery("#list2").jqGrid('addRowData', i + 1,
									entityArray[i]);
					});

					request
							.fail(function(msg) {
								alert("Fetching of data from solr failed with error !");
							});
				});// end of (document).ready(function(){});


That is it, finally when we deploy this project to server and see the output it should look as below.
jqgrid_op

In my next post will be posting about the integration of SpringData and Apache Solr until then.
Happy coding jqgrid 🙂

Advertisements

One thought on “JQGrid to display Apache Solr Data

  1. Really Good and working for me ….
    Saved lot of time and easy to understand..

    I want to put a search there…
    Can You pls help me…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s