Developing a jQuery grid component

This article is about developing a jQuery grid component. At Gislen Software, we develop advanced user interfaces. If you develop web applications, it is always tricky to find suitable controls. The available commercial or free controls may have limitations, and there are a lot of them. It’s easy to just use the grid view control that Microsoft provides in asp.net but to really deliver great responsive websites, you may sometimes need to develop a custom control.

Of all the controls that are commonly used on web applications, Grid controls are probably the most frequently used. I am very fortunate to have been part of a control development team, and I was recently involved in creating a custom grid control system using JavaScript and ASP.net (Appframe Grid). I also developed a complete client-based grid control using jQuery (I have yet to give it a name). I just wanted to share my experience.

Before developing the control, I identified what was required from the custom grid control that is important to our application development
1. Performance
2. Rich UI
3. Interactivity
4. Reduce load on the server (Render essential controls on the server and do the rest on the browser)
5. Cross-browser support
6. Customizable
7. Easy maintenance

To get a faster response from the server, I decided to render only essential controls and pull the data as JSON objects. This would also free the server from rendering the grid control on the server.

To ensure the grid works on all browsers, we needed a proven stable library on most browsers. We have found that jQuery is probably the best JavaScript library around, and it was the most suitable for our requirements. it comes with a fantastic set of UI, which makes our job even more accessible!

We also designed our grid to load and render data on demand. It even fetches data from the server when the user scrolls down in the grid. The grid sends a request to the server for a chunk of data and appends it to the end of the grid and will continue doing the same until the grid is scrolled to the bottom of the data set.

The Grid also supports inline editing,, and each column cell’s editing behaviour can be configured.

I initially developed the grid for an in-house product. But then we got a customer project where the same functionality was required and with just some minor tweaking I was able to put it to use in the customer project as well.

This was an outstanding experience, and I am looking forward to developing more controls.

Peter Samraj
Senior Software Engineer