I know its been a really a huge time I blogged on something so here I do some research with using JQGRID a plugin for Jquery also Here I would like to show you how to integrate and use it with asp.net.
This may be really funny why I have posted a blog and wasted a time.. If you really see into it. You won't find a good document for using this Jqgrid along with asp.net webforms. Let me begin what are the files I included.
step 1 http://json.codeplex.com/ this is whr we can format json into the c# file. jst include the .dll file into the new visual studio project.
Step 2 Now yo got to add some cs file so that it will be easy for yo to work on.
first : Person.cs --> here yo got to create a property of three variable which you are going to use
using System;
using System.Collections.Generic;
using System.Web;
///
/// Summary description for Person
///
public class Person
{
public int ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
second: Json.cs where yo will include the values for these properties..
using System.Collections.Generic;
public class Json
{
public static string ToJson(object obj)
{
return Newtonsoft.Json.JsonConvert.SerializeObject(obj);
}
public static List
{
List
persons.Add(new Person() { ID = 1, FirstName = "Santhosh", LastName = "Kumar" });
persons.Add(new Person() { ID = 2, FirstName = "sk", LastName = "uknw" });
persons.Add(new Person() { ID = 3, FirstName = "wat", LastName = "up" });
return persons;
}
}
The middle one Newtonsoft is nothing but the file for converting into serialization for converting to the json file.
third: This is something really important for converting the text to into ienumeration of serialization format so that a file can be easily carried. name it as PersonList.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Collections;
///
/// Summary description for PageList
///
public class PageList
{
IEnumerable _rows;
int _totalRecords;
int _pageIndex;
int _pageSize;
object _userData;
public PageList(IEnumerable rows, int totalRecords, int pageIndex, int pageSize, object userData)
{
_rows = rows;
_totalRecords = totalRecords;
_pageIndex = pageIndex;
_pageSize = pageSize;
_userData = userData;
}
public PageList(IEnumerable rows, int totalRecords, int pageIndex, int pageSize): this(rows, totalRecords, pageIndex, pageSize, null)
{
}
public int total { get { return (int)Math.Ceiling((decimal)_totalRecords / (decimal)_pageSize); } }
public int page { get { return _pageIndex; } }
public int records { get { return _totalRecords; } }
public IEnumerable rows { get { return _rows; } }
public object userData { get { return _userData; } }
public override string ToString()
{
return Newtonsoft.Json.JsonConvert.SerializeObject(this);
}
}
This will make a count and check for number of values according to me yo can actually reuse the file.
Step 3: Now this is some thing really important to call the values json to our asp.net is possible through creating a webservice I m not going to change any name for the web service jst create a web service and use it.
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
///
/// Summary description for WebService
///
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService
{
public WebService()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
[ScriptMethod]
public string GetListOfPersons()
{
List
return Newtonsoft.Json.JsonConvert.SerializeObject(
new PagedList(persons, persons.Count, 1, persons.Count));
}
}
step 4: now Almost our work got over few more step in .aspx file to read data. Things needed before you get through. jqgrid google it nd download latest version also jquery ui, and jqgrid.
head runat="server">
title>
script type="text/javascript" src="<%= ResolveClientUrl("~/SyntaxHigligher/scripts/shCore.js") %>">
script type="text/javascript" src="<%= ResolveClientUrl("~/SyntaxHigligher/scripts/shBrushPlain.js") %>">
script type="text/javascript" src="<%= ResolveClientUrl("~/SyntaxHigligher/scripts/shBrushCSharp.js") %>">
script type="text/javascript" src="<%= ResolveClientUrl("~/SyntaxHigligher/scripts/shBrushJScript.js") %>">
script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '<%= ResolveClientUrl("~/SyntaxHigligher/scripts/clipboard.swf") %>';
SyntaxHighlighter.all();
/script>
link type="text/css" rel="stylesheet" href="<%= ResolveClientUrl("~/SyntaxHigligher/styles/shCore.css") %>" />
link type="text/css" rel="stylesheet" href="<%= ResolveClientUrl("~/SyntaxHigligher/styles/shThemeDefault.css") %>" /
script type="text/javascript" src="<%= ResolveClientUrl("~/scripts/jquery-1.3.2.min.js") %>">
<% if (false) { %>
script type="text/javascript" src="<%= ResolveClientUrl("~/scripts/jquery-1.3.2-vsdoc2.js") %>">
% } %>
link type="text/css" rel="stylesheet" href="<%= ResolveClientUrl("~/styles/redmond/jquery-ui-1.7.2.custom.css") %>" /> link type="text/css" rel="stylesheet" href="<%= ResolveClientUrl("~/styles/ui.jqgrid.css") %>" />
link type="text/css" rel="stylesheet" href="<%= ResolveClientUrl("~/styles/ui.multiselect.css") %>" />
script type="text/javascript" src="<%= ResolveClientUrl("~/scripts/jquery-ui-1.7.2.custom.min.js") %>">
script type="text/javascript" src="<%= ResolveClientUrl("~/scripts/i18n/grid.locale-en.js") %>">
script type="text/javascript" src="<%= ResolveClientUrl("~/scripts/jquery.jqGrid.min.js") %>">
script type="text/javascript" src="<%= ResolveClientUrl("~/scripts/ui.multiselect.js") %>">
/head>
body>
script type="text/javascript">
$(function () {
$("#table").jqGrid({
datatype: function (pdata) { getData(pdata); },
height: 250,
colNames: ['ID', 'First Name', 'Last Name'],
colModel: [
{ name: 'ID', width: 60, sortable: false },
{ name: 'FirstName', width: 200, sortable: false },
{ name: 'LastName', width: 200, sortable: false }
],
imgpath: '<%= ResolveClientUrl("~/styles/redmon/images") %>',
caption: "Sample JSON data retrieved from ASMX web services"
});
});
function getData(pData) {
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: '<%= ResolveClientUrl("~/WebService.asmx/GetListOfPersons") %>',
data: '{}',
dataType: "json",
success: function (data, textStatus) {
if (textStatus == "success")
ReceivedClientData(JSON.parse(getMain(data)).rows);
},
error: function (data, textStatus) {
alert('An error has occured retrieving data!');
}
});
}
function ReceivedClientData(data) {
var thegrid = $("#table");
thegrid.clearGridData();
for (var i = 0; i < data.length; i++)
thegrid.addRowData(i + 1, data[i]);
}
function getMain(dObj) {
if (dObj.hasOwnProperty('d'))
return dObj.d;
else
return dObj;
}
