I am trying JqGrid for our application with asp.Net MVC.
I am not able to get the data display.I am not sure what is the issue.
Here is my View Code:
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
#{
ViewBag.Title = "SearchEmployee";
}
<h2>SearchEmployee</h2>
<table id="list2"></table>
<div id="pager2"></div>
<script language="javascript">
$(document).ready(function () {
$("#list2").jqGrid({
url: 'Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
colModel: [
{ name: 'EMPLOYEEID', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
{ name: 'FIRSTNAME', index: 'FIRSTNAME', width: 90 },
{ name: 'LASTNAME', index: 'LASTNAME', width: 100 },
{ name: 'DOB', index: 'DOB', width: 100 },
{ name: 'AGE', index: 'AGE', width: 100 },
{ name: 'SSN', index: 'SSN', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
{ name: 'ADDRESS1', index: 'ADDRESS1', width: 80 },
{ name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
{ name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
{ name: 'STATE', index: 'STATE', width: 80 },
{ name: 'CITYNAME', index: 'CITYNAME', width: 80 },
{ name: 'PINCODE', index: 'PINCODE', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
//sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
My Controller Code:
public ActionResult Employees()
{
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
The issue is when i tried to get to display Employee list.
In IE,when I tried to run the application,its prompting to download Json file.
Please let me know whats the issue.
I have tried with the source code from the below Link:
http://www.techstrikers.com/Articles/jqgrid-in-mvc5-with-razor-view-and-entity-framework6.php
I agree with Abdul Hadi.You need to put a forward slash before the controller name so that your url is - url: '/Employee/Employees', And the column names need to match those in the Employee object(they should be the same case).
In addition to those two changes you have a whole bunch of columns defined that don't have a corresponsing property in the Employee class, so they can be removed. And be careful if you have a _Layout.cshtml page in your MVC application, sometimes this page has script references which will prevent you from using jqGrid.To prevent this from happenening try setting Layout = null; in your view.Here's a complete working example:
Controller:
public class EmployeeController
{
public ActionResult Index()
{
//This will return your Employee page.This should be set as the default action
return View();
}
public ActionResult Employees()
{
//This will return the data to bind to jqGrid
//DON'T CALL THIS DIRECTLY - otherwise you will get a situation where IE prompts you to download the .json file
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
}
View:
#{
ViewBag.Title = "Index";
Layout = null;
}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" />
<link href="https://cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function () {
$("#list2").jqGrid({
url: '/Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'AGE', 'GENDER', 'STATUS', 'ADDRESS1', 'CITYNAME'],
colModel: [
{ name: 'EmployeeId', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
{ name: 'FirstName', index: 'FIRSTNAME', width: 90 },
{ name: 'Age', index: 'AGE', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'Status', index: 'STATUS', width: 80, align: "right" },
{ name: 'Address1', index: 'ADDRESS1', width: 80 },
{ name: 'CityName', index: 'CITYNAME', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
<table id="list2" border="1"></table>
<div id="pager2"></div>
Output:
JavaScript is Case Sensitive and you forget to add slash at beginning of url so your code will be like below:
<script language="javascript">
$(document).ready(function () {
$("#list2").jqGrid({
url: '/Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
colModel: [
{ name: 'EmployeeId', index: 'EmployeeId', width: 55, sorttype: "int" },
{ name: 'FirstName', index: 'FirstName', width: 90 },
{ name: 'LASTNAME', index: 'LASTNAME', width: 100 },
{ name: 'DOB', index: 'DOB', width: 100 },
{ name: 'Age', index: 'Age', width: 100 },
{ name: 'SSN', index: 'SSN', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
{ name: 'Address1', index: 'Address1', width: 80 },
{ name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
{ name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
{ name: 'Status', index: 'Status', width: 80 },
{ name: 'CityName', index: 'CityName', width: 80 },
{ name: 'PINCODE', index: 'PINCODE', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
sortname: 'EmployeeId',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
On top of the comments by the other answers.
See the The answer for how you should format your json for jqgrid
public ActionResult Employees()
{
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
var jsonData = new
{
total = employeeList.Count,
page = 1,
records = 10,
rows = employeeList.ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Related
I wrote a table with JqGrid, but I found every row`s property of table is "tr id = 0" Following is my code and screenshot. What caused this error? Any help will be appreciated.
jQuery(grid_selector).jqGrid({
datatype: "json",
url:"getAllUserInfo.do",
mtype: 'POST',
height: 250,
colNames: ['Operation', 'userID', 'UserName', 'FullName', 'Department', 'Role', 'Telephone', 'MobilePhone', 'Mail', 'Status'],
colModel: [
{name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,search:false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: {recreateForm: true, beforeShowForm: beforeDeleteCallback},
onSuccess:function(respone){
var msg=respone.responseText;
if(msg=='success')
return true;
else
{
alert(msg);
return [false,msg];
}
},
editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback,}
}
},
{name: 'userID', index: 'userID', width: 60, sorttype: "int", editable:false, sortable:false, search:false, align:'center' },
{name: 'userName', index: 'userName', width: 100, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true},align:'center'},
{name: 'fullName', index: 'fullName', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"}},
{name: 'department', index: 'department', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"},editrules:{required:true}},
{name: 'role', index: 'role', width: 70, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']}, editrules:{required:true}},
{name: 'telephone', index: 'telephone', width: 70, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true,number:true}},
{name: 'mobilePhone', index: 'mobilePhone', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'mail', index: 'mail', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'status', index: 'status', width: 60, editable:true, edittype:"text", searchoptions:{sopt:['eq','ne']}}
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
multiselect: true,
multiboxonly: true,
onCellSelect:function(rowid, e){
},
gridComplete:function (){
$("#grid-table").closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-titlebar")
.css("text-align", "center").css("line-height","40px")
.children("span.ui-jqgrid-title")
.css("float", "none");
},
loadComplete: function () {
var table = this;
setTimeout(function () {
var msg= $("#grid-table").getGridParam('userData');
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
var re_records = $("#grid-table").getGridParam('records');
if(re_records == 0 || re_records == null){
if($(".norecords").html() == null){
$("#grid-table").parent().append("<div class=\"norecords\">No Records</div>");
}
$(".norecords").show();
}
else
{
$(".norecords").hide();
}
},
editurl:"userInfoOperate.do",
caption: "UserList",
autowidth: true,
});
Check it whether rows data has column with "id" as the name, just like the picture shows below. JqGrid will use the value of "id" column in rows data as the id value of tr tags, if it does have an id column in rows data.
I'm using jQgrid to display data from database.
When click my button, I am getting this error :
length of colNmaes <>colModel or 0!
Here is my code:
$(document).ready(function () {
$('#btndist').click(function () {
$.ajax({
url:"default.aspx/loaddata",
datatype:"json",
data: "{}",
contentType: "application/json;charset=utf-8",
method:"POST",
success: function (result) {
result=result.d;
jQuery("#Distable").jqGrid({
datatype: "local",
colModel: [
{ name:"EmpID", index:"EmpID",width:80},
{ name:"EmpFisrtName", index:"EmpFisrtName", width: 80 },
{ name:"EmpLastName", index:"EmpLastName", width: 80 },
{ name:"EmailAddress", index:"EmailAddress", width: 80 },
{ name:"MobileNo", index:"MobileNo", width: 80 },
{ name:"CityName", index:"CityName", width: 80 }
],
data: JSON.parse(result),
rowNum: 10,
loadonce: true,
rowList: [5, 10, 20],
pager: '#DistPager',
viewrecords: true,
sortorder: 'asc',
gridview: true,
autowidth:true,
sortname: 'EmpName',
height:'auto',
altRows: true,
hoverrows: true,
caption:"List Employee Details"
});
},
error: function (error) {
alert("Oops an error");
}
});
});
});
Can any one tell me why I'm getting that error?
You have to add colNames like following.
colNames: ['Emp ID', 'Fisrt Name', 'Last Name', 'Email', 'Mobile No', 'City']
Which will show as column header.
Update: Remove ajax call, jqGrid can load data from url itself.
$(document).ready(function() {
$('#btndist').click(function() {
jQuery("#Distable").jqGrid({
url: "default.aspx/loaddata",
datatype: "json",
colNames: ['Emp ID', 'Fisrt Name', 'Last Name', 'Email', 'Mobile No', 'City'],
colModel: [
{ name: "EmpID", index: "EmpID", width: 80 },
{ name: "EmpFisrtName", index: "EmpFisrtName", width: 80 },
{ name: "EmpLastName", index: "EmpLastName", width: 80 },
{ name: "EmailAddress", index: "EmailAddress", width: 80 },
{ name: "MobileNo", index: "MobileNo", width: 80 },
{ name: "CityName", index: "CityName", width: 80 }
],
rowNum: 10,
loadonce: true,
rowList: [5, 10, 20],
pager: '#DistPager',
viewrecords: true,
sortorder: 'asc',
gridview: true,
autowidth: true,
sortname: 'EmpName',
height: 'auto',
altRows: true,
hoverrows: true,
caption: "List Employee Details"
});
});
});
That is because you have not added the colNames.
It is mandatory to match the count of columns with the entries in the colModel.
Following error is prompted majorly if the columns count is not equal to number of entries inside the colModel.
So in your case it should be like this.
colNames: ['Emp ID', 'Emp First Name', 'Emp Last Name', 'Email Address', 'Mobile No', 'City Name'],
colModel: [
{ name: "EmpID", index: "EmpID", width: 80 },
{ name: "EmpFisrtName", index: "EmpFisrtName", width: 80 },
{ name: "EmpLastName", index: "EmpLastName", width: 80 },
{ name: "EmailAddress", index: "EmailAddress", width: 80 },
{ name: "MobileNo", index: "MobileNo", width: 80 },
{ name: "CityName", index: "CityName", width: 80 }
],
I want to add JQgrid to my project, but when I put the url with a method it doesn't return any data!
<script type="text/javascript">
$("#JQueryDemo").jqGrid({
url: 'JqGrid.aspx/GetStudent',
datatype: "JSON",
colName: ['ID', 'FirstName', 'LastName', 'Gender', 'Age', 'Mark'],
colModel: [
{ name: 'id', index: 'id', stype: 'int', width: 200 },
{ name: 'firstName', index: 'firstname', width: 200 },
{ name: 'lastName', index: 'lastname', width: 200 },
{ name: 'gender', index: 'gender', width: 200 },
{ name: 'age', index: 'age', width: 200 },
{ name: 'mark', index: 'mark', width: 200 }],
rowNum: 10,
sortname: 'id',
viewrecords: true,
// sortorder: "desc",
GridView: true,
caption: "List Students Detail"
});
How can I make it return data ?
I am working with asp.net and using n-tier style!
It says the javascript cant be found. I tried using other code for script src but still it doesnt work.Whenever I try to run this it says "Failed to load resource 404 the blah/blah/*js can`t be found.
http://localhost:51835/Scripts/ui.jqgrid.css
I tried googling everything but it still can`t find the script
#using System.Web.Script.Services`enter code here`
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<script src="#Url.Content("~/Scripts/jquery.jqGrid.js")"></script>
<script src="#Url.Content("~/Scripts/ui.jqgrid.css")"></script>
<meta name="viewport" content="width=device-width" />
<title>viewTry</title>
</head>
<body>
<div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
url: '',
datatype: "json",
colNames: ['Id','First Name', 'Last Name', 'Last 4 SSN', 'Department',
'Age', 'Salary', "Address",'Marital Status'],
colModel: [
{ name: '_id', index: '_id', width: 20, stype: 'text' },
{ name: 'FirstName', index: 'FirstName', width: 150 },
{ name: 'LastName', index: 'LastName', width: 150 },
{ name: 'LastSSN', index: 'LastSSN', width: 100 },
{ name: 'Department', index: 'Department', width: 80, align: "right" },
{ name: 'Age', index: 'Salary', width: 80, align: "right" },
{ name: 'Salary', index: 'Salary', width: 80, align: "right" },
{ name: 'Address', index: 'Address', width: 150, sortable: false },
{ name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }
],
rowNum: 10,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details"
});
</script>
<table id="JQGridDemo"></table>
</div>
</body>
</html>
I have a very simple jQgrid i am using for a website
<div id="catalogueSearchList" class="dataGrid">
<script type="text/javascript">
var catalogueSearchListConfig = {
id: 'catalogueSearchList',
action: 'List',
controller: 'Catalogue',
//href: '/Jobs/Adverts/',
onDblClick: function (id) { HERE!!! }) },
colNames: ['Name', 'CatalogueType'],
colModel: [
{ name: 'Name', index: 'Name', width: 400, align: 'left' },
{ name: 'Catalogue type', index: 'CatalogueType', width: 175, align: 'left' },
],
sortName: 'Name',
sortOrder: 'asc'
};
</script>
</div>
Where it displays "HERE!!!" what can I put here to allow when a viewer double clicks a value in the jqgrid it will navigate them to another page?
Its ok, the answer is
<div id="catalogueSearchList" class="dataGrid">
<script type="text/javascript">
var catalogueSearchListConfig = {
id: 'catalogueSearchList',
action: 'List',
controller: 'Catalogue',
//href: '/Jobs/Adverts/',
onDblClick: function (id) { window.location.href = "/Catalogue/Category/" + id },
colNames: ['Name', 'CatalogueType'],
colModel: [
{ name: 'Name', index: 'Name', width: 400, align: 'left' },
{ name: 'Catalogue type', index: 'CatalogueType', width: 175, align: 'left' },
],
sortName: 'Name',
sortOrder: 'asc'
};
</script>
</div>
Using javascript you can just select the window and set it's location to what you like :)