CODEWITHSUNDEEP
javascriptjqgrid
rajkumar600003
rajkumar600003

Reputation: 1

JQGrid - no output

The following html file don't give any output. all the scripts and css files referred here are valid. Please help me to troubelshoot this.

when it's loaded in browser, it gives only a blank page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.9.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 = [
    { id : "one", "name" : "row one" },
    { id : "two", "name" : "row two" },
    { id : "three", "name" : "row three" }
];

$("#grid").jqGrid({
    data: mydata,
    datatype: 'local',
    width: 500,
    colNames:['Id','Name'],
    colModel:[
    {name:'id', index:'id', key: true, width:50},
    {name:'name', index:'name', width:100}
    ],
    pager: '#pager',
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    caption:"jqGrid Example"
});
</script>

</head>
<body>
<table id="grid"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>

Upvotes: 0

Views: 93

Answers (2)

Sharun
Sharun

Reputation: 3082

You have to put $("#grid").jqGrid() inside document.ready().

<script>

        $( document ).ready( function ( e )
        {

var mydata = [
    { id : "one", "name" : "row one" },
    { id : "two", "name" : "row two" },
    { id : "three", "name" : "row three" }
];

$("#grid").jqGrid({
    data: mydata,
    datatype: 'local',
    width: 500,
    colNames:['Id','Name'],
    colModel:[
    {name:'id', index:'id', key: true, width:50},
    {name:'name', index:'name', width:100}
    ],
    pager: '#pager',
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    caption:"jqGrid Example"
});

         });
</script>

Upvotes: 1

Knaģis
Knaģis

Reputation: 21495

The reason is that <table id="grid"> is not yet created when the script executes. Move $("#grid").jqGrid() into a script block before closing </body>.

Alternatively you can use jQuery to schedule the grid initialization after the page elements are initialized:

$(document).ready(function() { $("#grid").jqGrid(...) });

Upvotes: 0

Related Questions