You are currently viewing Implementation and customization of Handsontable (jQuery Excel-like data grid)

Implementation and customization of Handsontable (jQuery Excel-like data grid)

  • Post published:February 20, 2014

vteam #315 started working on an an online ticketing system which is used to manage events, POS transactions and web transactions of event’s tickets. The system provides cost-effective way for colleges and universities to sell event tickets and collect payments via Internet. It is a sizable product with extensive public and admin portals, and integrated SQL Server Reporting. It is mainly developed using ASP.NET 4.0, C#, ADO.NET Entity Framework, LINQ, WCF, MS SQL Server and SQL Server Reporting Services.

The event setup module for inserting prices against venue sections was initially implemented using ASP.Net built in GridView Web Server control. It was working well with Clients having limited venue sections and user types, but following issues were faced once universities with more venue sections and user types started using our application:

  • Pricing grid was taking too much time to populate event prices for venue sections against user types.
  • The time and effort required for a simple requirement of assigning same price to all sections started frustrating admins even more.
  • The Grid was dynamically generated and number of cells generated increased with increase in venue sections and user types. For example if venue had 20 sections and event had 20 different user types then total number of cells were 400.

The requirement was to resolve above mentioned issues and also provide following additional features:

  • Client side solution instead of Server side for better performance and user experience.
  • Cell should be editable when user clicks on grid cell.
  • If cell value is modified it will automatically update database “auto save”.
  • Implement excel like “auto fill” to populate grid quickly and easily.

The following options were available for controls:

  • SlickGrid
  • Handsontable

SlickGrid can handle large data, but after doing some research our developer Mobeen finalized to implement the jQuery control “Handsontable” Excel-like data grid editor due to simple user interface and simplespreadsheet/excel like editing features.

All customer requirements were implemented and following customizations were also made which were not built in to the editor:

  • Added “SUM” functionality
  • Added “Column enable/disable” functionality
  • Implemented customized CSS

Following are few screen shots of Handsontable as used in the application:

Cell Edit
Cell Edit
Cell Edit