Hi,
I have to fill dta into a jquery grid from database.
Now i have the following code:
1. In controller
namespace JQGrid.Controllers
{
public class SampleJQGridController : Controller
{
SampleDAL sampleDal = new SampleDAL();
public ActionResult Index()
{
return View();
}
public ActionResult UserListing()
{
return View();
}
public s_GridResult GetData(string sidx, string sord, int page, int pageSize)
{
DataTable dt = new DataTable();
dt = sampleDal.UserRetrieve();
s_GridResult result = new s_GridResult();
List<s_rowdata> rowsadded = new List<s_rowdata>();
int idx = 1;
foreach (DataRow row in dt.Rows)
{
s_RowData newrow = new s_RowData();
newrow.id = idx++;
newrow.cell = new string[2]; //total number of columns
newrow.cell[0] = row[0].ToString();
newrow.cell[1] = row[1].ToString();
rowsadded.Add(newrow);
}
result.rows = rowsadded.ToArray();
result.page = page;
result.total = dt.Rows.Count;
result.record = rowsadded.Count;
return result;
}
}
}
2. In View
@model JQGrid.Models.SampleJQGrid
@{
ViewBag.Title = "UserListing";
}
<link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqgrid.min.js" type="text/javascript"></script>
<table id="Grid1" align="center" width="100%"></table>
<div id="pager" style="text-align:center;"></div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#Grid1").jqGrid({
url: 'SampleJQGrid/GetData',
datatype: 'json',
mtype: 'GET',
colNames: ['Name', 'UserName'],
colModel: [{ Name: 'Name', index: 'Name', width: 200 },
{ UserName: 'UserName', index: 'UserName', width: 300}],
pager: '#pager',
sortname: 'Name',
viewrecoreds: true
}).navGrid(pager,{edit:true,add:true,del:true,refresh:true,search:true});
});
</script>
3. In Model
namespace JQGrid.Models
{
public class SampleDAL
{
SqlConnection con = new SqlConnection();
SqlCommand cmd = new SqlCommand();
public void Getcon()
{
con.ConnectionString = ConfigurationManager.ConnectionStrings["MVC4SampleConnection"].ToString();
con.Open();
}
public DataTable UserRetrieve()
{
Getcon();
cmd.Connection = con;
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandText = "dbo.UserRetrieve";
SqlDataAdapter ad = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
ad.Fill(dt);
con.Close();
return (dt);
}
}
}
namespace JQGrid.Models
{
public class SampleJQGrid
{
}
public struct s_GridResult
{
public int page;
public int total;
public int record;
public s_RowData[] rows;
}
public struct s_RowData
{
public int id;
public string[] cell;
}
}
Now when i run the application i am getting error as:"Microsoft JScript runtime error: Object doesn't support this property or method"
Please help to solve this.