how to use JqGrid with Asp.net and Sqlserver
Posted by
Saranpselvam under
C# on 11/6/2014 5:57:29 AM |
Points: 75 | Views : 26630 | Status :
[Member]
Introduction
Hi In this I am going to show you how to use JqGrid with Asp.net and Sqlserver
Using the code
1. Go to vsstudio
2. add new project
3. add new webpage on your solution (example page name "jqgridwithwebmethod.aspx")
your .aspx page should be like this
-------------------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqgridwithwebmethod.aspx.cs" Inherits="Test.jqgrid.jqgridwithwebmethod" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link type="text/css" href="http://jqueryrock.googlecode.com/svn/trunk/css/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<link type="text/css" href="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryrock.googlecode.com/svn/trunk/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://jqueryrock.googlecode.com/svn/trunk/js/jquery-ui-1.9.2.custom.js"></script>
<script src="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/js/grid.locale-en.js" type="text/javascript"></script>
<script src="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#datagrid").jqGrid({
url: 'jqgridwithwebmethod.aspx/ConvertDataTabletoString',
datatype: 'json',
mtype: 'POST',
serializeGridData: function (postData) {
// return JSON.stringify(postData);
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json" },
loadonce: true,
colNames: ['Name', 'Age', 'Mobile', 'City'],
colModel: [
{ name: 'Name', index: 'Name', width: 200 },
{ name: 'Age', index: 'Age', width: 60 },
{ name: 'Mobile', index: 'Mobile', width: 60 },
{ name: 'City', index: 'City', width: 200 }
],
pager: '#navGrid',
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
gridview: true,
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "0"
},
caption: 'My first grid'
});
}).navGrid("#pager", { edit: true, add: true, del: false });
</script>
</head>
<body style="font-family: Arial; font-size: 10pt">
<table id="datagrid"></table>
<div id="navGrid"></div>
</body>
</html>
--------------------------------------------------------------------------------------
your .cs file should be like this
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
using System.Web.Script.Serialization;
using System.Web.Services;
namespace Test.jqgrid
{
public partial class jqgridwithwebmethod : System.Web.UI.Page
{
static string connectionString = Convert.ToString(ConfigurationManager.AppSettings["conn"]);
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static List<Dictionary<string, object>> ConvertDataTabletoString()
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(connectionString))
{
using (SqlCommand cmd = new SqlCommand("select distinct top 1050 name,age,Mobile,City from UserMaster with(nolock)", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
return rows;
}
}
}
}
}
------------------------------------------------------------------------------------------------------
Now you execute this page JqGrid will show the Datas
Supporting Css Files:
Please find attached css-js.zip file for css and jquery .
Conclusion
we achieved Jqgrid