In today’s world a common scenario while building web UI application is to provide a pageable and sortable data grid. And it gets even better if it uses AJAX to make it more responsive and flashy. So, I did some Google for jQuery plugin and I found jqGrid.Here are few more jQuery Grid recommendations http://stackoverflow.com/questions/159025/jquery-grid-recommendations . For the purposes of this demo I'm picking jQuery Grid, it quite easy to use and customize J !!!
Download the plugin and to unzip the contents to my scripts directory per the Installation . With the scripts and css unziped and ready to go, go to the page and add the proper call to initialize the jQuery grid. There are Four parts to this:First Step, add the required script and CSS to the page.
page
<link href="themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /> <link href="themes/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <script src="JS/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="JS/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="JS/jquery.jqGrid.js" type="text/javascript"></script>
The Second step is to Configure jGrid Properties.
1. url property which points to the URL that will provide the JSON data.Notice I have used url: FetchData.aspx' , which will return json data.2. colNames property contains the display names for each column separated by columns.3. colModel property is an array that is used to configure each column of the grid. colNames property should match up with the items in the colModel property.
Read this for more info to configure the grid.
The Third step is to add HTML for the grid. <table id="Jqgrid" width="100%"> </table> <div id="pager"></div> Let’s take a look at the JSON format expected by the grid. Read this, you can see it will look something like:
{ total: "xxx", page: "yyy", records: "zzz", rows : [ {id:"1", cell:["cell11", "cell12", "cell13"]}, {id:"2", cell:["cell21", "cell22", "cell23"]}, ... ]}
The Fourth Step, Go to the page which I provide in grid URL property, and as you can see I tried to mimic the PHP code in c# .net.
<%@ Page Language="C#" %><%@ Import Namespace="System.Web.Script.Serialization"%><%@ Import Namespace="System.Collections.ObjectModel"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { Response.Write(GetData()); Response.End(); } protected string GetData() { var list = new Collection<People> { new People {id = 1, name = "Shaitender", gender = 1, isClosed = false}, new People {id = 2, name = "Gabbar", gender = 1, isClosed = false}, new People {id = 3, name = "Jai", gender = 1, isClosed = true}, new People {id = 4, name = "Viru", gender = 2, isClosed = true}, new People {id = 4, name = "Basanti", gender = 2, isClosed = true} }; /// hard coded value passed for demo purpose /// Implement you logic :) !! return GridData(1, 1, 5, list); } public string GridData(int noOfPages, int page, int noOfRecords , Collection<People> list) { //anoymonous type of object var gridData = new { total = noOfPages, page = 1, records = noOfRecords, rows = list, }; var jsonSerializer = new JavaScriptSerializer(); return jsonSerializer.Serialize(gridData); //convert anoymonous type to json format } public class People { public People() { name = string.Empty; id = 0; gender = 0; isClosed = false; } public string name { get; set; } public int id { get; set; } public int gender { get; set; } public bool isClosed { get; set; } }
For demo checkout this link http://trirand.com/blog/jqgrid/jqgrid.html.The documentation I linked to also provide some gnarly looking PHP code you can use to generate the JSON data. Fortunately, you won’t have to deal with that. By using the anonymous type object you can generate JSON data. And write JSON data on the page.
A couple of things to point out. The arguments to the GridData methods are named according to the query string parameter names that jQuery grid sends via the Ajax request. I didn’t choose those names. By naming the arguments to the GridData exactly the same as what is in the query string, we have a very convenient way to retrieve these values.In this example, I statically create some JSON data and use the GridData method to return the data back to the grid and it works J !
Note you can add, edit, delete, and search in the grid. Add, edit and delete option are added in the demo project you can download and try it by yourself. When you are doing above action you need to include editurl: 'FetchData.aspx' in grid property.When you select a row and click on add/edit/delete button a popup will open like this
On submit of the button a request will be sended to 'FetchData.aspx' page with param .You can see in the firebug the querystring and param are sended to the page .According to the param you can perform actions.You can get data from param by using Request.Params.Get("oper") method .
With all this in place, you now have a pretty flashy approach to add, edit, and delete , paging and sorting data using AJAX. Now say good bye to repeater, data list and grid view. ;) !Please don’t forget to leave your valuable suggestion/feedback . Any pointer/suggestion would be really helpful for others too ;) !! Here is a demo project !!
* Note: To get detailed information regarding the function and events of JQGrid . Please refer jqGrid api documentation by Tony Tomov. http://www.secondpersonplural.ca/jqgriddocs/jqgriddocs32.pdf *
Great post Shaitender!
Thanks Vinz !!!
Very Good bolg dude, keep it up!!!!!!!!
Excellent! I've prepared similar scenarios for my code camp presentation. I'm using flexiGrid and jgGrid, and will show only one of them - still don't know which one :) - should evaluate a bit more which one seems better. Keep up the good work! ;)
The demo project link is not a valid link,can you update it.
Thanx
@Matelin Please check the link its updated now !!
What kind of email newsletter would you prefer to receive from CodeAsp.Net?18