Implementation of MS Excel like functionality in Web Application

  • Post published:September 29, 2015

JQuery and JavaScript are the technologies through which UI revolution in current web applications takes place. It drives the web pages in a way which seemed to be impossible in near past. We can say that JavaScript is the language of all modern applications being created nowadays.

vteam #457 was working on a project in which excel like functionality was required in a software page. That page was the backbone of this whole software project and it implements all the business formulas and logic. It also required to add new lines and calculations at run-time. Besides all this, excel like color formatting was also required.

To fulfill this requirement, vteam #457’s engineer Abbas Siddique started R&D of excel like controls and reviewed many Open Source and paid controls. More than 10 different controls were checked for this purpose. Finally it was decided that the only one control which can fulfill such requirements was “HandsonTable”.

Example:

handsontable-excel-likeFeatures of HandsonTable:

  1. Excel like appearance: By using HandsonTable, you don’t feel the difference with MS Excel if it is properly implemented. It has a very handy look, capabilities of adding or removing rows, rich support in application of formulas, capturing of user performed events are the same features which our Client wanted in his application.
  2. Open source: This control is open source and does not have any limitation to use it in commercial applications.
  3. Great performance: As it is JQuery based, hence it runs on client side and does not overload the server. All formatting and formulas runs very quickly.
  4. Rich formatting capabilities: HandsonTable has very good formatting capabilities. You can format cells just like in excel sheet. User can define header and footer and different styles of cells.
  5. Rich events: HandsonTable has a rich collection of events which makes the development fun and easy. Almost each click and movement of user can be achieved by these events and developers can response the user intelligently.
  6. Large community: Developers community is available for HandsonTable control help. By the help of this community, day to day problems get fixed very quickly.
    .

Examples of HandsonTable Usage in Code:

Few coding examples for HandsonTable usage are given below. You can see that table, row and column creation, data loading and formatting was done dynamically for our Client’s application.

Reference:
reference-handsontableContext Menu Settings:
context-menu-handsontableFormat Functions:
format-function-handsontableHeader Row Creation:
header-row-handsontable

Conclusion:

In market, there are different controls present to develop excel like functionality but we found HandsonTable best among all these controls. Reason being that it is very flexible, versatile and contains very heavy toolset which is suitable for the implantation of excel like functionality in web applications.