Using FlexiGrid in your ASP.NET application
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.
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.The download below does not include the MySQL connector for .NET 2.0. You will have to download it and include it in your project and remember to make the necessary changes in the connection string.
Happy Programming!
Hi,
Thanks for the great article.
Do you happen to know if this plugin can be used with ASP.NET GridView or ListView?
If yes, what kind of modifications needed to be done to them?
Hi,
nice one.could you send me total project with .Net 2.0.
Thanking you.
Can you put up a demo?
Thanks
Dan
Thanks everyone for your valuable comments.
@vvvlad: Using this plugin you can display your data only in a tabular format by default. If you need to display it any other format, then you will have to customize the CSS according to your needs.
@salman, @danny117: All the code you will need is already given in this post but I’ll upload a demo this weekend just for the heck of it.
I would appreciate it if you all “kicked” my article. Thanks
Hi Raihan,
Thanks for an excellent posting, could you post the link to the source code, preferably with the VS solution/projects files?
I have put up the VS solution for download! Enjoy!
Hi,
Thank you very much for your VS solution.but it is in framework 3.5.but i request for framework 2.0.LINQ is not support in 2.0.so your is not sucessfully working in 2.0.there is some error in Getdata page in XML part.
could you give the VS in framework 2.0 please.
Thanking you advance.
Hi,
Good work, and its vary user full to me
can you guide me how i can give row it to table row
How to connect with JSON data, i m using ms-sql, i had tried with ms-sql with codeing, but could not, the flowing is my code.
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
objCommon.SelectQuery = “SELECT COUNT(*) FROM Products”;
objCResultCommon = objCommon.GetDataSet;
if ( objCResultCommon.HasError( ) )
{
throw new Exception( objCResultCommon.ErrorMessage );
}
int rowCount = objCResultCommon.DataSetResult.Tables[ 0 ].Rows.Count;
foreach ( DataRow dr in objCResultCommon.DataSetResult.Tables[ 0 ].Rows )
{
StringBuilder jsonData = new StringBuilder( );
jsonData.AppendLine( “{” );
jsonData.AppendLine( “page: ” + page.ToString( ) + “,” );
jsonData.AppendLine( String.Format( “total: {0},”, this.GetTotalRecords( ) ) );
jsonData.AppendLine( “rows: [" );
bool rc = false;
//while ( dr.Read( ) )
//{
if ( rc )
{
jsonData.AppendLine( "," );
}
jsonData.Append( String.Format( "{{id:'{0}',cell:['{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}','{8}','{9}','{10}']}}”,
dr[ "ProductID" ].ToString( ), dr[ "ProductName" ].ToString( ), dr[ "SupplierID" ].ToString( ),
dr[ "CategoryID" ].ToString( ), dr[ "QuantityPerUnit" ].ToString( ), dr[ "UnitPrice" ].ToString( ),
dr[ "UnitsInStock" ].ToString( ), dr[ "UnitsOnOrder" ].ToString( ), dr[ "ReorderLevel" ].ToString( ),
dr[ "Discontinued" ].ToString( ) ) );
rc = true;
//}
jsonData.AppendLine( “]” );
jsonData.Append( “}” );
Response.Write( jsonData.ToString( ) );
}
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
cheers for this good information ill recommend your wordpress blog to every single one of my buddys as we have been searching for this for decades lol.