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 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 using JavaScript and (Appframe Grid). I also went on to develop a complete client-based grid control using jQuery (I am 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 make sure the grid works on all browsers, we needed a library that was proven stable on most browsers. We have found that jQuery is probably the best JavaScript library around and it was the most suitable for our requirements and it comes with a fantastic set of UI which makes our job even easier!

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 the editing behaviour for each column cell 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 a very good experience, and I am really looking forward to developing more controls.

Peter Samraj
Senior Software Engineer

Was this article helpful?

One thought on “Developing a jQuery grid component”

Leave a Reply