Test REST Server
In order to properly evaluate jqGrid, DataTables, and SlickGrid against our “good enough” criteria, I set up a test REST server that returns “real” JSON data. The server contains a list of over 10,000 objects.

While the data is real, the response time is not. The test REST server pre-fetches all real data from back-end services, then cache’s that data internally in order to eliminate server response time in the evaluation. While real server calls are measured in 10ths of seconds, my test REST server’s average response time is 3ms for any given page of 50 objects.

I had to create unique REST end-points for each of my tables in this evaluation because each uses different parameters to control the list behavior. They all pull from the same list of cached objects.

jqGrid Links

- Home: http://www.trirand.com/blog/
- Wiki: http://www.trirand.com/jqgridwiki/doku.php
- Examples: http://www.trirand.com/blog/jqgrid/jqgrid.html
- Addl Examples: http://www.trirand.net/demo.aspx
- Code: http://www.trirand.com/blog/jqgrid/downloads/jqgrid_demo38.zip
- Column Model: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
- Params: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
- Themes: NOTE: jqGrid uses jQuery UI – ThemeRoller to style its table. This could be a problem for us because JQuery UI and JQuery-Mobile don’t play well together. We’ll see…
- Commercial Web Site: http://www.trirand.net/

Evaluation

I created a test html file which creates a jqGrid table and loads 50 objects at a time from the REST end-point mentioned above. Remember, it’s a cache’d list.

1) Performance is #1

• Like DataTables, performance is outstanding …actually, when fetching records, it’s identical because it’s the same back-end
• 50 records: desktop, round-trip is 3ms, iPad3 is about .3s – .5s
• 500 records: desktop, round-trip is 15ms, iPad3 is about 1s
• Unlike SlikGrid and DataTables, jqGrid does not implement Virtual Rendering. As far as I can tell, it renders the full result set as soon as it’s received. Don’t know how much of a performance hit this is, but it could be a big deal depending on what you put in your cells.
• However, with jqGrid’s gridview parameter, it is able to “append” all the rows with a single call …making it a very fast operation. Note that this choice comes with some limitations: for example, no afterInsertRow event, etc.
• I do not like how jqGrid handles the scroll bar on an iPad3. While it appropriately hides the scroll bar, the table does NOT take over the available space. Further, when scrolling, it does not use the iPad3′s “thin” scroll bar. Finally, when fast swiping, it stops scrolling immediately after you’ve quit touching …to smooth scroll stop like you’d expect.

2) Device requirements: performance and functionality will be determined by low-powered, ICS-based tablets, not older Honeycomb devices, nor smart phones

• As noted above, performance on an iPad3 is outstanding
• Performance on a Honeycomb smart phone (Galaxy S2 on T-Mobile) is acceptable (but not part of our required criteria)

3) Table paging and navigation will be performed by next, prev, first, last, and #’s links

• jqGrid supports both paging-via-navigation-controls and paging-via-scrollbar
• Here’s an example: Can do this: http://trirand.com/blog/jqgrid/jqgrid.html look at Advanced/Master Detail

4) The table will load 1 “page” of data at a time, if the rows don’t “fit” the vertical table size, users may scroll to see the rest of the page

• jqGrid will load 1 “page” of data at a time
• If the fetched rows don’t “fit” the vertical table size, users may scroll to see the rest of the page. Note my “scrolling” comments in the Performance section above.
• The table can be sized such that it grows as needed to accommodate all rows

5) The table will not cache previous requests (to protect mobile devices; and if #1 is met, no need)

• jqGrid by default does not cache previous requests
• I am uncertain if jqGrid can be set up to pre-fetch addl pages or not ??????

6) All paging, filtering, sorting will be performed by the back-end; none in the client

• jqGrid supports paging, filtering, and sorting in both the UI and the back-end

7) We will filter on only string data originating from the server for now

• According to its doc, developers can specify sorting for various types including string, number, boolean, link, select and percent. However, I believe this is for client-side processing only, and is not part of ajax-based solutions.

8) Code size should not exceed 200K (minified and gzip’d); the smaller the better

• File size: File size: CSS: 12K; JS 430K raw / 270K minified / 68K gzip’d;
• 3 times larger than DataTables

9) We will only select a mature, well supported Table widget. We will not make our own.

• jqGrid is currently in version 4.4.0 (released in June 2012)
• and has been developed now for at least 3 years, since 2009 …but I actually suspect much longer since that was version 3.5.x
• has over 8,500 threads (27,000 posts) in its on-line forums
• Unknown number of unit tests …I’m uncertain how rock-solid this product is. Probably pretty good.
• It does not provide very many pre-built examples …but the ones that are there suffice

10) Theming Support :

• DataTables supports ONLY JQuery UI ThemeRoller classes
• However, with the rich set of overridable events, I believe we could add/remove any styles we want …just like DataTables

11) Table must by stylable to may our particular look and feel

• jqGrid does not specifically provide APIs to apply the styles we want throughout the table. However, with the rich set of overridable events, I believe it can be styled to match our needs …just like DataTables.
• jqGrid provides a very rich Column Renderer which is passed the backing row Object and the property value …giving the renderer the opportunity to display addl fields in each cell
• jqGrid does not really permit row expansion showing more details about a row Object. Any examples I’ve seen add additional rows …kinda klunky.

12) Row selection (single select for now; multi-select for future)

• jqGrid supports single selection via row-selection or checkboxes
• I do not believe jqGrid supports multi-select across page boundries like DataTables does. Not sure I care though either

13) Links / Actions – in-row actions for now; likely top-of list actions for future

• With its column renderers, jqGrid supports placing any data into a cell, including buttons/actions
• jqGrid will use any specified Object value (for example: id) as the row’s ID attribute
• jqGrid supports a very rich set of custom events which code can bind to

14) Editing: no in-cell editing for now

• jqGrid supports in-cell / in-row editing
• 2 method exist: see “Row Editing -> In-Line Navigator” and “Live Data Manipulation -> Navigator” examples

15) Alternate Views: no “View As…” alternate views for now

• jqGrid does not directly support alternate views for its tables

16) No conclusion on table width handling. However, most people would like to see columns shrink until it’s ridiculous, then hide low-priority columns altogether

• A jqGrid table normally sizes to the combined widths of its visible columns
• However, you can also set the grid width, and the columns will adjust accordingly
• I have not seen any example where the table’s width sizes dynamically. Seems to always be based on the grid’s “set Width”
• Data within a jqGrid cell by default does NOT wraps unto addl lines (However, I’m sure we could easily change this with the CSS whitespace property). By default, when a cell’s data exceeds the cell bounds, ellipses show…
• Uncertain if jqGrid could auto-show/hide low priority columns based on table width

17) The table needs to support a distribution-friendly license

• jqGrid is licensed under the free MIT license
• However, they have also launched an official commercial website http://www.trirand.net

Special Notes

• jqGrid supports a truly awesome Column Model
• I’m not too impressed with its “row” editor …adequate, but not beautiful. Of course, we can style any way we want.
• I don’t know why jqGrid’s “row expansion” feature simply adds more rows. In my testing, I learned that I can place any amount of data into each cell, independent of the other cells. In other words, rows can have variable row height, and I could auto-expand the current row if I wanted to. I think they should specifically make an “expand” feature for rows to show addl detail.
• jqGrid supports a grid within a grid!
• jqGrid support a “tree” control by adding additional rows with indented values. Kinda cool!. Check out the “simple” example at: http://www.trirand.net/demotreephp.aspx
• jqGrid has launched an official commercial website http://www.trirand.net. Check it out; there are some impressive demos there. You’ll note that they’ve spent considerable time trying to make a list and tree out of the same control. IOW, if you need a tree control, this is one is pretty good.

Notable Params

- 100 params
- 20 Events
- over 50 Triggered Events !!

ajaxGridOptions  - override all AJAX parameters including: error, complete, and beforesend events
altclass         - specify the class you want for the "alternate/zebra" rows.  Hmmm ...do they have this for all styles?
autowidth        - table auto-sizes (width) according to the size of its parent div
cellEdit         - enable editing
cellsubmit       - when editing, determine where the edits are saved (remote or clientArray/local)
colModel         - array which describes the parameters of the columns
deepempty        - uses JQuery to empty a row; prevents memory leaks
direction        - good support for Right-to-Left and Left-to-Right languages
forceFit         - all columns will always consume 100% of the table width (adjacent columns adjust as needed)
hoverrows        - enable row hover effects
idPrefix         - add a prefix to a row's ID
loadui           - control what to do while loading: disabale, enable, block
mtype            - HTTP GET or POST
pager            - enable paging controls.  NOTE: this also controls into what HTML div to place the pager
pgtext           - show details about the current list
prmNames         - controls the names of all the parameters sent to the server
scroll           - tells jqGrid to disable paging controls and to enable paging-via-scrollbar
shrinkToFit      - recalculate column widths as the table shrinks
sortable         - uses JQuery UI to permit reordering of the columns.  Since we're trying to be JQuery Mobile compliant, we do not want this.
toolbar          - defines the tools available in the toolbar
treeGrid         - enable the "tree" aspects of the grid control
url              - the source of the ajax data
userData         - addl data to make part of the request
afterInsertRow   - method gets called after a row is created
beforeRequest    - before a request is made
beforeProcessing - after a response is received (but before doing anything with it)
gridComplete     - after all received data is fully processed
onPaging         - after selecting a paging options, but before processing the data
resizeStop       - fires after resizing event has taken place (resizeStart also)
tons and tons of other options and events