Data is not loading in the jqgrid. There are no errors when I ran the code also.I think I have some problem with passing the data from controller and receiving in the view.When I load the data retrieved from database in the html table it worked fine for me. Please help.
<script src="~/JQGridReq/jquery-1.9.0.min.js" type="text/javascript"></script>
<link href="~/JQGridReq/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<script src="~/JQGridReq/jquery.jqGrid.js" type="text/javascript"></script>
<link href="~/JQGridReq/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
url: '@Url.Action("Details1", "Details")',
datatype: "json",
colNames: ['Id', 'First Name', 'Last Name', 'Salary', 'Gender'],
colModel: [{ name: 'ID', index: 'ID', width: 20 },
{ name: 'FirstName', index: 'FirstName', width: 20 },
{ name: 'LastName', index: 'LastName', width: 20 },
{ name: 'Salary', index: 'Salary', width: 20 },
{ name: 'Gender', index: 'Gender', width: 20 }],
rowNum: 10,
mtype: 'GET',
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
viewrecords: true,
sortorder: 'desc'
});
</script> model IEnumerable<MvcApplication31.Models.Employee>
@{
ViewBag.Title = "Details1";
}
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>List of All Employees</title>
</head>
<body bgcolor="red" align="center" style="font-family: Arial; font-size: 10pt">
<h2>List of Empolyees</h2>
@*<table style="border: solid 15px red; width: 100%; vertical-align: central;">
<tr>
<td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; font-family: 'Times New Roman'; font-weight: bold; font-size: 20pt; color: chocolate;">jQ Grid Example In ASP.NET C#
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: central; padding: 50px;">
<table id="dataGrid" style="text-align: center;"></table>
<div id="pagingGrid"></div>
</td>
</tr>
</table>
<div id="pagingGrid"></div>*@
@*<table style="border: solid 15px red; width: 100%; vertical-align: central;">
<tr>
<td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; font-family: 'Times New Roman'; font-weight: bold; font-size: 20pt; color: chocolate;">jQ Grid Example In ASP.NET C#
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: central; padding: 50px;">
<table id="dataGrid" style="text-align: center;"></table>
<div id="pagingGrid"></div>
</td>
</tr>
</table>*@
<!-- <table id="entrydata" border="1" height="200" width="400" align="center" bgcolor="pink">
<!-- <tr>
<th>
ID
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Salary
</th>
<th>
Gender
</th>
</tr>-->
@*@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem=>item.ID)
</td>
<td>
@Html.DisplayFor(modelItem=>item.FirstName)
</td>
<td>
@Html.DisplayFor(modelItem=>item.LastName)
</td>
<td>
@Html.DisplayFor(modelItem=>item.Gender)
</td>
<td>
@Html.DisplayFor(modelItem=>item.Salary)
</td>
</tr>
}
</table>-->*@
<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
</body>
</html>
public ActionResult Details1()
{
string ConnectionString = ConfigurationManager.ConnectionStrings["EmployeeContext"].ConnectionString;
SqlDataReader rdr = null;
List<Employee> l = new List<Employee>();
SqlDataAdapter da;
DataSet ds = new DataSet();
using (SqlConnection connection = new SqlConnection("data source=.; database=Srivatsava; integrated security=SSPI"))
{
connection.Open();
da = new SqlDataAdapter("select * from Employee", connection);
da.Fill(ds);
foreach (DataRow dr in ds.Tables[0].Rows)
{
l.Add(new Employee() { ID = int.Parse(dr[0].ToString()), FirstName = dr[1].ToString(), LastName = dr[2].ToString(), Salary = int.Parse(dr[3].ToString()),Gender=dr[4].ToString() });
}
//Create an instance of SqlCommand class, specifying the T-SQL command that
//we want to execute, and the connection object.
//SqlCommand cmd = new SqlCommand("Select Id,FirstName,LastName,Salary,Gender from tblEm", connection);
// rdr = cmd.ExecuteReader();
/* while (rdr.Read())
{
// get the results of each column
int id = (int)rdr["ID"];
string contact = (string)rdr["FirstName"];
string company = (string)rdr["LastName"];
int city = (int)rdr["Salary"];
string gender = (string)rdr["Gender"];
// print out the results
Console.Write(contact);
Console.Write(city);
Console.Write(company);
Console.WriteLine(gender);
Console.WriteLine(id);
}*/
connection.Close();
}
return View(l);
}
You are returning View instead of Json. You return statement should like following.
return Json(l, JsonRequestBehavior.AllowGet);