(Original creator: GMockford)

HTMLGrid for Windows Applications - Part #2


This is part #2 of my JQGrid series and although later than originally intended but the extra time was for a number of reasons including enhancements in the JavaScript, adding more data to the examples, and bringing the JQGrid software up to the latest release. The consequence of doing that was that the original samples posted had to be re-worked.  Hopefully the samples will be updated but for the moment you can download the New version using the link at the bottom of this post.

That may be annoying but it does bring in additional grid features not present in the previous versions so I think that it will prove worthwhile. However this sample does contain both old and new sample components. The back-end service has also been re-factored to support both XML and JSON instead of separate components and a rework of the structs portion for good measure.

The sample contains all of the code you need described within the readme document but they say "an image can speak a thousand words" so for this post I simply want to show you what the options look like with the following screen captures. It makes this blog a bit long but hopefully you can better see the benefits of using this grid.

The focus this time is primarily  editing and three of the sample components show the three editing types namely form based, row based, and a variant of cell editing that behaves like the native grid and allows updates to multiple rows. All three options provide full C.R.U.D functionality. Look at the names of the form components in the title for the following images and match to the components in the downloadable sample.

Form Based Editing. Notice in the sample the addition of extra icons on the toolbar for Add, Edit, and Delete. Not very visible in this screen shot but look carefully and you can see them at the bottom. Select a row and click on the appropriate toolbar icon and a simple data entry form will pop-up to allow you to update, delete, or add new rows. Pressing the appropriate button  will effect the transaction. In this form rows are edited one-by-one.

Inline editing. This time editing icons are presented for each row( except add which is still in the toolbar). Select a row and choose action using the grid inbuilt action icons on each row. Save icon stores the changes.

Inline row Editing. Once again editing icons within the toolbar but this time on selecting a cell it becomes editable (if enabled), including options to format changes like the datepicker shown.  Not shown in this image but there is a Uniface form button in the sample that when pressed will cause the changes to be applied. In this form of editing multiple updates are done together. I do have to warn you though I was a bit lazy so in the event that you switch to a new page the updates are lost but I figured that this might be something to add and get experience using the grid API.

As there was a delay in providing this second part I added some extra examples to show large file paging (5,000 and 50,000) rows including options to group data by columns and column selection.

Grouping by column.     Choose a column via the dropdown list and the grid regroups on that selection.      


Column Selection I added the column selection icon to the toolbar that when selected provides a simple column selector.

Theme selector Lastly I added to all of the samples a theme switcher so that you may experiment viewing the grid under different theme effects provided by the jquery UI library, although of course you can create your own. You can of course fix the theme and remove the switcher but have fun with the sample themes provided.
These are just a few examples of the capabilities of this grid, I hope that you find them useful and next time we will explore other areas like cell formatting and tree grids and given time I might throw in a few other bells and whistles

Download updated Sample
When downloaded look for readme file

JQGRID was created by Tony Tomov at Trirand Inc 

  • No labels

1 Comment

  1. There was a problem with a couple of the components where the grid was defined as widget type HTMLATTACH instead of HTML. In addition I missed a file UGPRESONGRP.TXT from the zip. You could simply change the widget type to HTML and say no to the "clear extended trigger" question and recompile or simply download the new sample :-)Both omissions have been corrected and the sample zip updated, apologies for any problems this may cause.