jQuery Grid Plugin - jqGrid - Topic: jqgrid not displaying data http://www.trirand.com/blog/?page_id=393/help/jqgrid-not-displaying-data Simple:Press Version 5.7.5.3 eyal1234 on jqgrid not displaying data http://www.trirand.com/blog/?page_id=393/help/jqgrid-not-displaying-data#p27335 Help http://www.trirand.com/blog/?page_id=393/help/jqgrid-not-displaying-data#p27335 Hello ,

I am new with jqrid i am trying to bind the data to jqrid with no success

Here is my html page:

notice that ths json data is static i am not using any server code side 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

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

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="JavaScript/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="JavaScript/grid.locale-en.js" type="text/javascript"></script>

<script src="JavaScript/jquery.jqGrid.min.js" type="text/javascript"></script>

<script src="JavaScript/json2-min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

var gridJson = { page: 1, total: 2, records: 10, rows:

[

{ Id: 0, Label: "Custom Field 1"},

{ Id: 1, Label: "Custom Field 2" },

{ Id: 2, Label: "Custom Field 3" },

{ Id: 3, Label: "Custom Field 4" },

{ Id: 4, Label: "Custom Field 5" }

]

};

function dataBindToGrid()

{

//setup the grid

$("#myGrid").jqGrid({

datatype: 'json',

datastr: gridJson,

colNames: ['Id', 'Custom Field Name', 'Action'],

colModel: [

{ name: 'Id', index: 'Id', hidden: false, classes: 'id' },

{ name: 'Label', index: 'Label', width: 500 },

{ width: 132, sortable: false, classes: 'action', align: 'center' }

],

pager: jQuery('#pager'),

jsonReader:

{

repeatitems: false

},

width: 832,

height: "100%",

scrollOffset: 20,

rowNum: 10,

rowList: [10, 15, 20, 25],

sortname: 'Label',

sortorder: "asc",

viewrecords: true,

hoverrows: false,

caption: "",

beforeSelectRow: function (rowid, e) { return false; } //this disables row being highlighted when clicked

});

}

jQuery(document).ready(function () {

jQuery("input#LoadData").live("click", dataBindToGrid);

});

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<table id="myGrid"></table>

<div id="pager"></div>

<input type="button" id="LoadData" value="LoadData" />

</div>

</form>

</body>

</html>

]]> Sat, 15 Sep 2012 22:39:11 +0300