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"
});
});
});