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’ll briefly walk through the flow:
- 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.
- The RenderGrid method in the GridFramework.js is called which initiates an AJAX call to the GridFrameworkHandler.aspx.
- 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.
- It invokes the method to perform the necessary database work.
- It calls the GridGenerator.cs to build a HTML table based on the config object and the data.
- The generated HTML table is passed back to the GridFrameworkHandler.aspx.
- 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.