Loading ...

jQuery : jqGrid with C# Asp.net | CodeAsp.Net

jQuery : jqGrid with C# Asp.net

(57595)
0
/5
Avg: 0/5: (0 votes)
Published: 9/20/2010 by Shaitender Singh

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.

    <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 *

 

 

Comments (17)

Vinz

Great post Shaitender!

10/1/2010
 · 
 · Shaitender Singh likes this.
 
by
Shaitender

Smile Thanks Vinz !!!

10/1/2010
 · 
 
by
Vijjendra

Very Good bolg dude, keep it up!!!!!!!!

10/3/2010
 · 
 · Shaitender Singh likes this.
 
by
gajodhar
gajodhar said:
nice shot sattu :p
1/3/2014
 · 
 
by
hajan
Hajan Selmani said:

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! ;)

10/25/2010
 · 
 · Shaitender Singh likes this.
 
by
Matelin
Matelin said:

The demo project link is not a valid link,can you update it.

Thanx

1/3/2011
 · 
 
by
Shaitender

@Matelin Please check the link its updated now !!

1/27/2011
 · 
 
by
Ghulam Haider
Ghulam Haider said:
Excellent work, I really appricate your effort, you save my Hrs. One thing is not working on my side that data is not fetching. I have investigate through firebug but it is 100% json return. I have downloaded the project from your link and did not modify any thing. please
10/1/2011
 · 
 
by
Ghulam Haider
Ghulam Haider said:
Thank you very much, I have got the problem, I just change the case of the the first capital letter of the "people" class properties e.g "Name" to "name" etc.. and it started work.
10/1/2011
 · 
 
by
Ghulam Haider
Ghulam Haider said:
in your project sorting is not working. Can you guide me?
10/2/2011
 · 
 
by
moazzam
moazzam said:
in your example.. Grid is not showing any data that is being return from FetchData.aspx. how can i bind it. urgent help is required.
12/18/2011
 · 
 
by
david
david said:
i have the same problem .
i dont recive any data in return.... any ideas???
3/13/2013
 · 
 
by
changho
changho said:
replace jQuery(#jsonmap) -> $(#jsonmap)
10/3/2013
 · 
 
by
jon
jon said:
replacce this with capital letter jQuery("#jsonmap").jqGrid({ url: 'FetchData.aspx', datatype: 'json', colNames: ['ID', 'Name','Active','Gender'], colModel: [{ name: 'id', index: 'id', width: 20, editable: false, editoptions: { readonly: true, size: 10 }}, { name: 'Name', index: 'name', width: 150, align: "left", editable: true, size: 100 }, { name: 'IsClosed', index: 'isClosed', width: 100, align: 'left', editable: true, edittype: "checkbox", editoptions: { value: "true:false", formatter: "checkbox" } }, { name: 'Gender', index: 'gender', width: 100, formatter:'select', editable: true, edittype: "select", editoptions: {value: "0:select;1:male;2:female"} }], rowNum: 10, rowList: [2, 5, 10, 15], pager: '#pjmap', sortname: 'id', sortorder: "desc", viewrecords: true, jsonReader: { repeatitems: false }, width: 600, caption: 'jqGrid demo', height: '100%', editurl: 'FetchData.aspx' });
12/24/2011
 · 
 
by
bhavya
bhavya said:
Hey hi very good work pagination and search is not working urgent help required .. thanks
5/9/2012
 · 
 
by
chandana
chandana  said:
Can any one tell me how to add drop down list with in the cell element with the hard coded value..
5/9/2012
 · 
 
by
manoj
manoj said:
who is shaitender among sholey character
11/18/2012
 · 
 · Shaitender Singh likes this.
 
by
madhu
madhu said:
very good article.. helped me alot.
thank u sooooooooooooooooo much
1/29/2013
 · 
 · Shaitender Singh likes this.
 
by
david
david said:
david said:
i have the same problem .
i dont recive any data in return.... any ideas???
3/13/2013
 · 
 
by
Xander
Xander said:
replace name: 'name' with name: 'Name' in jqgrid.aspx
3/13/2013
 · 
 
by
david
david said:
Xander , it works! thnx !
3/13/2013
 · 
 
by
rajesh
rajesh said:
pagination and sorting is not working.. can u guide ?
5/7/2013
 · 
 
by
Ajay
Ajay said:
Can anybody tell me how can i get the details of only a particular column by sending a data parameter in method like GetData(userName)...How can i send data parameters in this situation?
19 hours ago
 · 
 
by
  • Name:*
  • Email:*
  • Website:
Type the characters you see in the image *

Top articles

Quick Vote

What kind of email newsletter would you prefer to receive from CodeAsp.Net?