Working with DataGrids in jQuery | 3 | WebReference

Working with DataGrids in jQuery | 3

By Joydip Kanjilal


The open source jQuery library is a widely popular cross-browser, CSS3-compliant JavaScript library that can be used to simplify your JavaScript programming tasks. To tackle one task in particular, binding data to data grids, jQuery has a number of available plugins. I often use jqGrid, which is awesome.

In this article, I explain how to use jQuery and the jqGrid plugin to bind data to data grids in Visual Studio. I provide examples for both ASP.NET MVC and WCF. To get started, you should have the following installed in your system:

  1. Visual Studio 2008
  2. Visual Studio 2008 SP1
  3. jQuery Library
  4. Visual Studio 2008 jQuery Plugin

Alternatively, you can simply download and use Visual Studio 2010 as it comes with in-built support for jQuery. A good understanding of JavaScript programming also is essential to follow the concepts discussed in this article

Using jqGrid to Work with DataGrid in jQuery

What is this jqGrid anyway? It is an Ajax-enabled jQuery plugin. To work with this grid, you should have the necessary styles and scripts included as shown in the following code snippet:

You can also include your script files programmatically as shown in the code snippet below:

To include the jQuery scripts, you can simply drag them from the Solution Explorer Window onto your Web form.