jqgrid sample using array data, what am I missing

Question

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? Th

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.)

Answer 5

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.

Answer 6

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.