Working with DataGrids in jQuery | 3

[next]

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:

Visual Studio 2008
Visual Studio 2008 SP1
jQuery Library
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:

<head runat="server">
    <title>Working with jQGrid in jQuery</title>
    
<link rel="stylesheet" type="text/css" title="coffee" media="screen" ref="/scripts/themes/coffee/grid.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="themes/grid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
    <script src="js/jquery.layout.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script src="js/ui.multiselect.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.js" type="text/javascript"></script>
    <script src="Scripts/jUtilities.js" type="text/javascript"></script>
    <script type="text/javascript" src="Scripts/jQueryAjax.js"></script>
</head>

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.

[next]

Working with DataGrids in jQuery | 3

Using jqGrid to Work with DataGrid in jQuery

Find a programming school near you