JavaScript Grid Framework

In previous posts (here, here and here), I referenced that I was building a framework for JavaScript based grids. Today I’d like to begin to detail how this framework works. This post will provide an overview and coming posts will show sample code.


I’ve been working on an ASP.NET web forms application that uses the GridView control frequently to display tabular data and provided editing capabilities for that data. Each GridView is wrapped in an Update Panel to prevent the entire page from posting back to the server when the user interacts with the grid. This approach is straight forward and has worked well for us.

However, as the application has grown, the performance around the grids has steadily decreased. Sometimes it was because business data validation rules needed to be put into place. Sometimes it was because requirements dictated that another grid be added to the page. Performance had decreased to the point were it took several seconds to open a row in edit mode or even add a row.

I began to explore using AJAX calls to WebMethods on a .aspx page. I’ve used this approach before for other functionality so I knew it was very responsive. After toying with some prototypes, I became convinced that it was possible to create a HTML table and interact with it via JavaScript.

JavaScript Grid Framework

After tweaking, hitting browser performance walls and rewriting bits, I now have a JavaScript based framework that provides us with grids to display and interact with tabular data.

JavaScript Grid Framework Process Flow

JavaScript Grid Framework Process Flow

I’ll briefly walk through the flow:

  1. At some point (usually on a page load event), the MyGrid_Config.js is executed. This creates a config object with all of the necessary details about the specific grid. For example, what methods to call for database interaction. What properties should be assigned to each column, etc.
  2. The RenderGrid method in the GridFramework.js is called which initiates an AJAX call to the GridFrameworkHandler.aspx.
  3. This page acts, in a way, like a network router. It looks at the config data and figures out which class to instantiate and which method to call.
  4. It invokes the method to perform the necessary database work.
  5. It calls the GridGenerator.cs to build a HTML table based on the config object and the data.
  6. The generated HTML table is passed back to the GridFrameworkHandler.aspx.
  7. GridFramework.js places the markup in a a DIV and calls the jEditable jQuery plugin. This plug in allows for inline editing of the grid values. Literally, you simply click on the value and you can edit it.

So how well does it work?

It works very well! Each grid initialized via lazy loading so no work is done unless the tab it’s on is displayed. Editing just takes milliseconds while deleting and adding rows is all less than a second. I’ve been very pleased with how it’s all turned out.

Share this Story:
  • facebook
  • twitter
  • gplus

About Jeremy Foltz

Leave a comment