Dan's Green Shoes

Got my green shoes on!

HTML JavaScript Data Grids

5 Comments

Line-of-Business applications tend to have data grids and ProModel products are no exception.  Our users have come to expect some rich behaviors that are not inherit in your basic HTML table element.  ProModel recently ranked the most popular HTML/JavaScript data grids out there right now.  Below you will find our summary.  Please note that many “Yes” and/or “No” values are hyperlinks into an example if we could find one.

We chose jxqGrid.  If you see a data grid we missed, please let me know which one.

Feature Rankings

Got To Have It Features

  1. Sorting
  2. Inline Editing
  3. Column Resizing
  4. Cell Selection
  5. Cell copy/paste
  6. Range copy/paste “Update”
GRID Sorting Inline Editing Column Resizing Cell Selection Cell copy/paste Range copy/paste
jqxGrid Yes Yes Yes Yes Yes Yes
jqGrid Yes Yes   (but not great) Yes No No No
SlickGrid Yes Yes   (but not great) Yes Yes Yes Yes
ParameterQuery Yes Yes (but not great) Yes Yes No No
Handontable Yes Yes Yes (but buggy) Yes Yes Yes
wijmo (ComponentOne) Yes Yes Yes Yes No No
KendoUI (Telerik) Yes Partial Yes Yes No No
koGrid Yes No Yes No No No
dhtmlxGrid Yes Yes Yes Yes No No
jTable Yes No Yes No No No
Sencha Ext JS Yes Yes Yes Partial No No
IgniteUI (Infragistics) Yes Partial Yes Yes No No
Syncfusion Yes Yes Yes No No No
WebGrid (Intersoft Solutions) Yes Yes Yes Yes No No

Love It Features

  1. Row Selection
  2. Filtering
  3. Flood Fill
  4. Virtualizing
  5. Range copy/paste “Adds”
  6. Knockout/Data Integration
GRID Row Selection Filtering Flood Fill Virtualizing Knockout/Data   Integration
jqxGrid Yes Yes No Partial Can   bind to pretty much anything..   Can   use KO as well
jqGrid Yes Yes   – Search No Yes MVC
SlickGrid No Yes – Search Yes Yes Seems to be kinda   “hard-wired”
ParameterQuery Yes Yes – Search No Yes Doesn’t   support KO
Handontable No No Yes No Not   sure about KO
wijmo   (ComponentOne) Yes Yes –   Filter Row No No Seems   you can use KO
KendoUI (Telerik) Yes Yes No Yes They   kinda have their own framework and server wrappers
koGrid Yes No No No Seems   you can use KO
dhtmlxGrid Yes Yes   – Search No Yes Doesn’t   support KO
jTable Yes Yes – Search No No Not   sure about KO
Sencha Ext JS Yes Yes No Yes Not   sure about KO
IgniteUI (Infragistics) Yes Yes No Yes KO   support
Syncfusion Yes Yes No Yes Not   sure about KO
WebGrid (Intersoft Solutions) Yes Yes No Yes Not   sure about KO

Like It Features

  1. Moving Rows
  2. Frozen Columns
  3. Col Selection
  4. Grouping
  5. Merged Column Headers
  6. Direct Breeze.js integration
  7. Column Reorder
GRID Frozen Columns Grouping Merged Column   Headers Column Reorder Excel Like Direct Breeze.js   integration
jqxGrid Yes Yes No Yes Yes No (refer to   notes for further links)
jqGrid Yes Yes   – but not user Yes Yes No No
SlickGrid No No No Yes Partial No
ParameterQuery Yes No Yes No No No
Handontable No No No Yes (but buggy) Yes No
wijmo   (ComponentOne) No Yes Yes Yes No No
KendoUI (Telerik) No No No Yes No Yes,   but a hack
koGrid No Yes No Yes No No
dhtmlxGrid Yes No No Yes No No
jTable No No No No No No
Sencha Ext JS Yes Yes   – (but buggy) Yes Yes No No
IgniteUI (Infragistics) No Yes Yes Yes No No
Syncfusion Yes Yes Yes Yes No No
WebGrid (Intersoft Solutions) Yes Yes Yes Yes No No
Advertisements

Author: Dan Hickman

Chief Technology Officer ProModel Corporation

5 thoughts on “HTML JavaScript Data Grids

  1. I like very much the sistematical approach. I’ve made something similar in order to cope with some requirements related to grids.
    http://www.dariomac.com/Research/Evidence-based-research-of-JavaScript-Grids-according-to-a-set-of-expected-attributes

  2. Hi Dan,

    Thanks a lot for sharing your analysis.

    I played around with jqxGrid (JQWidgets.com) quite a bit today and found that the auto column widths were based on the header sizes and not on the row data.. Did you see this problem?
    In other respects, jqxGrid is quite flexible..

    Thank you,

    Ravi.

  3. Thank you for sharing you analysis – very helpful.

    I ran into a fundamental sizing issue with JqxGrid and was wondering what you saw..

    The width of the columns is based on the column-header-data and not on row-data. Due to this, some data in the column is cut off (if the column header is small)..

    Also, it has been a month since you zeroed in on JQXGrid.. are you happy with your decision? Or did you change it since :).

    Thank you,

    Ravi

    • We are overall happy with JQXGrid. Where we are using JQXGrid is in new products that are not released yet and, may never be released. Mostly, R&D stuff when time permits. Microsoft is promoting a Durandal/KO/Require/Breeze solution for LOB applications and I spent some time building an application using that technology. There is mixed feelings within the group how nicely JQXGrid plays with KO/Breeze data binding.

      I am in the process of rewriting the same application using AngularJS. Since Angular’s 2 way binding does not functify the properties, I feel like data grids will be easier to work with. Still in the middle of my evaluation though….hope that helps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s