(Original creator: GMockford)
HTMLGrid for Windows Applications - Part #2
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