Dan's Green Shoes

Got my green shoes on!


5 Comments

HTML JavaScript Data Grids

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


5 Comments

ASP.Net MVC 4 SPA navigation with Sammy.js

I am learning from John Papa’s “Single Page Apps with HTML5, Web API, Knockout and jQuery” on Pluralsight. The course outlines building an application called “Code Camper”.  The “Code Camper” sample is very effective at showing an end to end SPA design.  It leverages a bunch of open source libraries and can be a lot to take in all at once.  One of the libraries used is called Sammy.js.  I decided it would beneficial to focus on just Sammy.js library which is the focus of this blog post.

If you are like me then you are also new to Single-Page Applications.  I find it helpful to start with a simple definition.  Wikipedia defines SPA as a “web application…that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.  In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or partial changes are performed loading new code on demand from the web server, usually driven by user actions.” Continue reading