I’ve been exploring JQuery for quiet some time now and I’m already a huge fan! Not only is it light-weight but its extensible too - there are plugins for everything, just name it! Well, almost everything 
Today I’m going to demonstrate how we can use the excellent FlexiGrid plugin in our ASP.NET applications.
Add the following code to the head section of the document in which you want to display the grid.
1 <link href="style/flexigrid.css" rel="stylesheet" type="text/css" />
2
3 <script src="scripts/jquery.js" type="text/javascript"></script>
4
5 <script src="scripts/jquery.flexigrid.js" type="text/javascript"></script>
6
7 <script type="text/javascript">
8
9 $(document).ready(function(){
10
11 $("#flex1").flexigrid
12 (
13 {
14 url: ‘GetData.aspx’,
15 dataType: ‘xml’,
16 colModel : [
17 {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
18 {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
19 {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
20 {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left'},
21 {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
22 ],
23
24 /*searchitems : [
25 {display: 'ISO', name : 'iso'},
26 {display: 'Name', name : 'name', isdefault: true}
27 ],*/
28 sortname: "iso",
29 sortorder: "asc",
30 usepager: true,
31 title: ‘Countries’,
32 useRp: true,
33 rp: 15,
34 showTableToggleBtn: true,
35 width: 700,
36 height: 400
37 }
38 );
39 });
40
41 </script>
The grid is going to get its data from an aspx file called "GetData.aspx". In the Page_Load(..) event of this page, generate the XML and send it back to the requesting page.
1 int page = int.Parse( Request.Form[ "page" ].ToString() );
2 int rp = int.Parse( Request.Form[ "rp" ].ToString() );
3 string sortname = Request.Form[ "sortname" ].ToString();
4 string sortorder = Request.Form[ "sortorder" ].ToString();
5
6 string sort = String.Format( "ORDER BY {0} {1}", sortname, sortorder );
7
8 if( page == null )
9 page = 1;
10
11 if( rp == null )
12 rp = 10;
13
14 int start = ( ( page - 1 ) * rp );
15
16 string limit = String.Format( "LIMIT {0}, {1}", start, rp );
17
18 Response.ClearHeaders();
19 Response.AppendHeader( "Expires", "Mon, 26 Jul 1997 05:00:00 GMT" );
20 Response.AppendHeader( "Last-Modified", DateTime.Now.ToLongDateString() + " " + DateTime.Now.ToLongTimeString() );
21 Response.AppendHeader( "Cache-Control", "no-cache, must-revalidate" );
22 Response.AppendHeader( "Pragma", "no-cache" );
23 Response.AppendHeader( "Content-type", "text/xml" );
24
25
26 // Generating XML Data
27
28 EnumerableRowCollection<DataRow> data = GetCountryDataTable(sort, limit);
29
30 XDocument xmlDoc = new XDocument(
31 new XDeclaration("1.0", "utf-8", "yes"),
32
33 new XElement("rows",
34 new XElement("page", page.ToString()),
35 new XElement("total", GetTotalRecords().ToString()),
36 data.Select(row => new XElement("row", new XAttribute("id", row["iso"].ToString()),
37 new XElement("cell", row["iso"].ToString()),
38 new XElement("cell", row["name"].ToString()),
39 new XElement("cell", row["printable_name"].ToString()),
40 new XElement("cell", row["iso3"].ToString()),
41 new XElement("cell", row["numcode"].ToString())
42 )
43 )
44 )
45 );
46
47 Response.Write(xmlDoc);
48 Response.End();
Here’s the function that returns the DataRow collection.
1 private EnumerableRowCollection<DataRow> GetCountryDataTable( string sort, string limit )
2 {
3 using( DBM.SqlCommandEx sqlCmd = new DBM.SqlCommandEx( String.Format( “SELECT iso,name,printable_name,iso3,numcode FROM country {0} {1}”, sort, limit ) ) )
4 {
5 return sqlCmd.GetDataTable().AsEnumerable();
6 }
7 }
Finally, I used LINQ to create the XML document but you can do it using Strings or any other method you prefer.
Happy Programming!
