Quick start – creating your first grid

Exclusive offer: get 50% off this eBook here
Instant jqGrid [Instant]

Instant jqGrid [Instant] — Save 50%

Learn how to use the powerful jqGrid library to manage your data from the frontend with this book and ebook

$19.99    $10.00
by Gabriel Manricks | July 2013 | Open Source Web Development

In this article by Gabriel Manricks, author of Instant jqGrid, we will learn how to customize jqGrid and set it up the way you like. There is a little bit of tweaking necessary in order to customize jqGrid and get it set up the way you like. The good news is, you can use that folder as a template and every time you want to make a new project with jqGrid you can just make a copy of that folder.

(For more resources related to this topic, see here.)

So, let's do that right now for this example. Create a copy of the entire jqGrid folder named quickstart; easy as pie.

Let's begin by creating the simplest grid possible; open up the index.html file from the newly created quickstart folder, and modify the body section to look like the following code:

<body>
<table id="quickstart_grid"></table>
<script>
var dataArray = [
{name: 'Bob', phone: '232-532-6268'},
{name: 'Jeff', phone: '365-267-8325'}
];
$("#quickstart_grid").jqGrid({
datatype: 'local',
data: dataArray,
colModel: [
{name: 'name', label: 'Name'},
{name: 'phone', label: 'Phone Number'}
]
});
</script>
</body>

The first element in the body tags is a standard table element; this is what will be converted into our grid, and it's literally all the HTML needed to make one.

The first four lines are just defining some data. I didn't want to get into AJAX or opening other files, so I decided to just create a simple JavaScript array with two entries. The next line is where the magic happens; this single command is being used to create and populate a grid using the information provided.

We select the table element with jQuery, and call the jqGrid function, passing it all the properties needed to make a grid. The first two options set the data along with its type, in our case the data is the array we made and the type is local, which is in contrast to some of the other datatypes which use AJAX to retrieve remote data.

After that we set the columns, this is done with the colModel property. Now, there are a lot of options for the colModel property, which we will get to later on, numerous settings for customizing and manipulating the data in the table. But for this simple example, we are just specifying the name and label properties, which tell jqGrid the column's label for the header and the value's key from the data array.

Now, open index.html in your browser and you should see something like the following screenshot:

Not particularly pretty, but you can see that with just a few short lines, we have created a grid and populated it with data that can be sorted.

But we can do better; first off, we are only using two of the four standard layers we talked about: the header layer and the body layer. Let's add a caption layer to provide little context, and let's adjust the size of the grid to fit our data.

So, modify the call to jqGrid with the following:

$("#grid").jqGrid({
datatype: 'local',
data: dataArray,
colModel: [
{name: 'name', label: 'Name'},
{name: 'phone', label: 'Phone Number'}
],
height: 'auto',
caption: 'Users Grid',
});

And refresh your browser; your grid should now look like the following screenshot:

That's looking much better. Now, you may be wondering, we only set the height property to auto, so how come the width seems to have snapped to the content? This is due to the fact that the right margin we saw earlier is actually a column for the scroll bar. By default jqGrid sets your grid's height to 150 pixels, this means, regardless of whether you have only one row, or a thousand rows, the height will remain the same, so that there is a gap to hold the scroll bar in an event when you have more rows than that would fit in the given space. When we set the height to auto, it will stretch the grid vertically to contain all the items, making the scroll bar irrelevant and therefore it knows not to place it.

Now this is a pretty good quick start example, but to finish things off, let's take a look at the navigation layer, just so we can say we did.

For this next part, although we are going to need more data, I can't really show pagination with just two entries, luckily there is a site http://www.json-generator.com/ created by Vazha Omanashvili for doing exactly this.

The way it works is, you specify the format and number of rows you want, and it generates it with random data. We are going to keep the format we have been using, of name and phone number, so in the box on the left, enter the following code:

[
'{{repeat(50)}}',
{
name: '{{firstName}} {{lastName}}',
phone: '{{phone}}'
}
]

Here we're saying we would like 50 rows with a name field containing both firstname and lastname, and we would also like a phone number. This site is not really in the scope of this book, but if you would like to know about other fields, you can click on the help button at the top.

Click on Generate to produce a result object, and then just click on the copy to clipboard button. With that done, open your index.html file and replace the array for dataArray with what you copied. Your code should now look like the following code:

var dataArray = {
"id": 1,
"jsonrpc": "2.0",
"total": 50,
"result": [ /* the 50 rows */ ]
};

As you can see, the actual rows are under a property named result, so we will need to change the data key in the call to jqGrid from dataArray to dataArray.result. Refreshing the page now you will see the first 20 rows being displayed (that is the default limit). But how can we get to the rest? Well, jqGrid provides a special navigation layer named "pager", which contains a pagination control. To display it, we will need to create an HTML element for it. So, right underneath the table element add a div like:

<table id="grid"></table>
<div id="pager"></div>

Then, we just need to add a key to the jqGrid method for the pager and row limit:

caption: 'Users Grid',
height: 'auto',
rowNum: 10,
pager: '#pager'
});

And that's all there to it, you can adjust the rowNum property to display more or less entries at once, and the pages will be automatically calculated for you.

Summary

In this article we learned how to create a simple Grid and customize it. We used different properties and functions for the same. We also used different layers to customize the jqGrid.

Resources for Article :


Further resources on this subject:


Instant jqGrid [Instant] Learn how to use the powerful jqGrid library to manage your data from the frontend with this book and ebook
Published: July 2013
eBook Price: $19.99
See more
Select your format and quantity:

About the Author :


Gabriel Manricks

Gabriel Manricks is a full stack software & web developer focusing on PHP and both frontend and server-side JavaScript frameworks.

Gabriel works as a staff writer for NetTuts+, where he enjoys learning as well as teaching others, and he also freelances in web consulting, development, and writing.

Books From Packt


Learning Ext JS 4
Learning Ext JS 4

 Instant jQuery Boilerplate for Plugins [Instant]
Instant jQuery Boilerplate for Plugins [Instant]

 Instant jQuery 2.0 Table Manipulation How-to [Instant]
Instant jQuery 2.0 Table Manipulation How-to [Instant]

 jQuery Plugin Development Beginner's Guide
jQuery Plugin Development Beginner's Guide

Instant jQuery Masonry How-to [Instant]
Instant jQuery Masonry How-to [Instant]

Instant jQuery UI Starter [Instant]
Instant jQuery UI Starter [Instant]

 Instant jQuery Drag-and-Drop Grids How-to [Instant]
Instant jQuery Drag-and-Drop Grids How-to [Instant]

Learning jQuery - Fourth Edition
Learning jQuery - Fourth Edition


Your rating: None Average: 1.5 (2 votes)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
s
r
i
5
F
S
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software