Reputation: 31
jqgrid sample using array data, what am I missing
I'm new in jqgrid, I'm just trying thes example to work. I have a html file only, nothing more. When I ran this file, array data is not showing. What am I missing here? Thanks in advance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demos</title>
<link rel="stylesheet" type="text/css" media="screen" href="lib/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/ui.multiselect.css" />
<style type="text/css">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}
/*Splitter style */
#LeftPane {
/* optional, initial splitbar position */
overflow: auto;
}
/*
* Right-side element of the splitter.
*/
#RightPane {
padding: 2px;
overflow: auto;
}
.ui-tabs-nav li {position: relative;}
.ui-tabs-selected a span {padding-right: 10px;}
.ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
.ui-tabs-selected .ui-tabs-close {display: block;}
.ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}
.ui-datepicker {z-index:1200;}
</style>
<script src="lib/jquery-1.4.2.js" type="text/javascript"></script>
<script src="lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="lib/jquery.layout.js" type="text/javascript"></script>
<script src="lib/grid.locale-en.js" type="text/javascript"></script>
<script src="lib/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="lib/jquery.tablednd.js" type="text/javascript"></script>
<script src="lib/jquery.contextmenu.js" type="text/javascript"></script>
<script src="lib/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
// We use a document ready jquery function.
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total', 'Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
multiselect: true,
imgpath: "lib/basic/images",
caption: "Manipulating Array Data"
});
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list").jqGrid('addRowData',i + 1, mydata1[i]);
</script>
</head>
<body>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
Upvotes: 2
Views: 34799
Answers (8)
Reputation: 1
Try this friends
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mydata = [{
Sno: "1",
StudentName: "Ricky",
DateOfJoining: "05/12/2014"
}, {
Sno: "3",
StudentName: "Hyden",
DateOfJoining: "06/12/2014"
}, {
Sno: "4",
StudentName: "Gill Crist",
DateOfJoining:"04/12/2014"
}, {
Sno: "2",
StudentName: "Lee",
DateOfJoining: "07/12/2014"
}];
$(function () {
$("#grid").jqGrid({
data: mydata,
datatype: "local",
colNames: ["Sno", "StudentName", "DateOfJoining"],
colModel: [
{ name: "Sno", width: 100},
{ name: "StudentName", width: 160 },
{ name: "DateOfJoining", width: 150, align: "right" }
],
pager: "#pager",
rowNum: 2,
rowList: [1, 2, 3],
sortname: "Sno",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Student Details"
});
});
</script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
</body>
Upvotes: 0
Reputation: 2176
I am also trying to develop the same example but also received same error and after doing lots of try and error , finally i come to the right path. i am putting my sample example for loading array data in jqgrid. this is working example.
i have included lots of script file in my head tag because i am not sure about it. i Remove '<' and '>' tag please add it. working code is :-
html xmlns="http://www.w3.org/1999/xhtml
head
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.22.custom.css" />
<link rel="stylesheet" type="text/css" href="ui.jqgrid.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
script type="text/javascript"
jQuery(document).ready(function()
{ jQuery("#list4").jqGrid
(
{
data: mydata,
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client'],
colModel:[
{name:'id',index:'id', width:60},
{name:'invdate',index:'invdate' },
{name:'name',index:'name', width:100}
],
pager: '#pager',
rowNum:2,
rowList:[10,20,30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
multiselect: true,
imgpath: "themes/basic/images",
caption: "Manipulating Array Data"
}
);
var mydata = [ {id:"1",invdate:"2007-10-01",name:"test"},
{id:"2",invdate:"2007-10-01",name:"test"},
{id:"3",invdate:"2007-10-01",name:"test"},
{id:"4",invdate:"2007-10-01",name:"test"},
{id:"5",invdate:"2007-10-01",name:"test"},
{id:"6",invdate:"2007-10-01",name:"test"},
{id:"7",invdate:"2007-10-01",name:"test"},
{id:"8",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").addRowData(i, mydata[i]);
}//function
);//ready
script
head
body
This is table
table id="list4"
/table
div id="pager" class="scroll" style="text-align:center;"
/div
This is table
/body
/html
Upvotes: 0
Reputation:
Your array declaration and manipulation loop should be inside of anonymous function jQuery(document).ready(function(){...}), and not outside of it.
This way it will be executed after jqQrid initialization and not before.
Upvotes: 0
Reputation: 11
You are trying to use a pager when you have not set the pager other needed info like the number of rows and page number. Your loop runs into problems when it can't figure out the values for these variables.
Upvotes: 1
Reputation: 619
Ah, its a damn typo in the Demo code.
The array that is declared is called mydata, and the array in the loop is mydata1[..] (note that evil 1)
grid.locale-en has to be declared first! Then the Browser's debugger can tell you.
(more 'bugyi's, I have some strange Loading text on the top and a striped gray background.)
Upvotes: 2
Reputation: 11
I think the problem is in the colModel somehow. Check if the script after colModel runs. Take only colModel out and then check again. I'm also having this problem at the moment.
example:
jQuery("#appGrid").jqGrid({
datatype: "local", //or clientSide
colNames: ["Patient"],
colModel:[{name:'pat',index:'pat'}]
});
*some code* <- won't run
No wonder the loop doesn't work if the grid won't let you execute code after.
But when I do this:
jQuery("#appGrid").jqGrid({
datatype: "local", //or clientSide
colNames: ["Patient"]
});
*some code* <- will run after col error message
The Grid builds just fine, but the code after it isn't executed at all. I don't know where the error is.
Upvotes: 1
Reputation: 11
This are the css and js to include that do the trick for me. Very important to include grid.base.js
Upvotes: 1
Reputation: 105
The example code seems to be broken. Try this in the for loop:
$("#list").addRowData( i, mydata[i], "last" );
Those parameters are: rowId, data, position.
Upvotes: 0
Related Questions
- jqgrid ASP.NET MVC -- getting data right for the grid
- Unable to present the data in jqgrid ASP.NET MVC
- How to populate jqgrid using asp.net mvc 3
- JQGrid not showing json data
- jqgrid with asp.net mvc
- jqGrid data not showing but rows are generating
- jgrid is not showing array data
- jqGrid not data display in the grid
- Confused about jQuery handling of my data
- Pass Data Arrays into jqgrid table