jqGrid Demo & Examples

To download the entire package of demo files (.html, .css, .js, .php, .aspx) click here.

Let’s take a look at the jqGrid customizations in action.

In this first example (download: jqgrid4e.html) you can see a first draft where I just packed this thing with multiple options.

I loaded data via ajax as well as post-load record insertion from a local data array object. There’s inline editing, as well as detail-view editing via the auto-generated form.

Click on a row and it switches to edit mode. The values do not save when you hit ENTER or move to another record. However, they could if you alter my code to tell it to save or submit to the server via ajax. While you’re on a row click the pencil icon in the pager footer. A form pops up where you can edit the field values. If you make a change a POST AJAX request is made and you receive something like this.

The inputted values were “4″, “abc”, “aaa” and returned the same values with “123″ added to each value.
{
“id”: “4123″
}, {
“Name”: “abc123″
}, {
“Gender”: “aaa123″
}

If you click the plus sign in the pager footer the same auto-generated form pops up, but this time it’s blank. When you click SUBMIT it sends a POST and the values come back changed as they are added to the grid.

You’ll also notice that on the first load, after record #10, the manual array data is pushed into the client-side grid. If you reload the grid, navigate to the next page of data, etc you lose the loaded data array. This is due to a lack of a proper data store that would keep track of the client-side data and ensure it’s rewritten when necessary. If you want to manage this you have to write it yourself.

If you’d like to step through the grid using Firebug or Chrome Developer click here.

The following version (download: jqgrid5e.html) of the grid is not so different in user features as it has the onclickSubmitLocal function that shows you how to save your data locally. The SAVE button is custom and is added at the end of the script. Remember that you need to add an extra CSS class found at the top of the script that is referenced in the custom button definition.

If you’d like to step through the grid using Firebug or Chrome Developer click here.

This final example (download: jqgrid6e.html) shows how to rewrite the form popup in Edit mode. I added a jQuery UI Hebrew Date Picker and a graphic file uploader.

When uploading a file only a .jpg, .gif or a .png file is accepted. I didn’t add in the progress bar that comes with the blueimp plugin I used. So, it will take a few seconds for the image to show. Be Patient! You can go ahead and upload a second image and it will replace the first image.

If you’d like to step through the grid using Firebug or Chrome Developer click here.

1 comment so far ↓

#1 Ken in Toronto on 12.08.13 at 6:29 pm

Thanks alot for this – having all the files for a working example is a great help.

I used the db schema and data as in ‘database.sql’ in the zipped aspx solution. One small typo – the php backends in the demo refer to the column ‘invid’ in the table ‘invheaders’ … this should be ‘id’ as per the loaded tables. I made that small fix to all the php backends and they all now work for me.

Leave a Comment