Developing a jQuery grid component

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 using JavaScript and ASP.net (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.

jQueryBefore 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 server (Render essential controls on 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 behavior for each column cell can be configured.

I initially developed the grid for an inhouse 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 develop more controls.

Peter Samraj
Senior Software Engineer

Comments

2
  1. Vijesh

    Hi

    I was struggling to create a pure ajax grid control, Can you give me some tips how to create an independent grid control using jQuery for asp.net

    Reply
    • admin

      To build a jQuery grid , you have to have the following in place.

      1) Grid settings – The grid settings are attributes of the grid such as the height and width. The settings can be sent in as a parameter while initialising the grid
      2) Column settings collection(array or column settings ) – This collection is a collection of column setting where each column setting holds the attributes of a column.
      3) Event handlers – You would probably need to have your grid component handle different events like key press, row change, selection change, etc.
      4) Cell engine – The cell engine is the most important part of your code that actually creates each cell from the data source (the data source can either be a parameter while initializing the grid or it could be an attribute in the grid setting). You can either choose your grid to have a table based layout or you can use a div based layout. You would probably want to learn the pros and cons of using both before u decide. I have used the div based approach as I could do a lot more styling using CSS. The cell engine would be called each time you create a row when you bind data or when you add a new row.

      Since you have mentioned an AJAX grid control, I suggest you initialise the grid and then send a jQuery ajax request to the server to fetch the data that you want and bind the grid with the response data.

      Peter

      Reply

Leave a Reply