.networks: JSON and jqGrid Example

Below is a simple example of how I use a JSON object to fill a jqGrid. I was at first unable to fill the grid and it always came back empty until I inserted the following property value:

            
jsonReader: {
   repeatitems: false
}

My HTML:

<html>
  <head>
    <title>My Grid</title>
  </head>
  <body>
    <form id="form1">
      <table id="myGrid"></table>
      <div id="pager"></div>
    </form>
  </body>
</html>

My JavaScript:

//get this data from the cache
        var gridJson = { page: 1, total: 2, records: 10, rows: [
            { Id: 0, Label: "Custom Field 1", LastUpdatedDate: "10/02/2012" },
            { Id: 1, Label: "Custom Field 2", LastUpdatedDate: "10/02/2012"}]
        };

        //setup the grid
        $("#myGrid").empty().jqGrid({
            datatype: 'jsonstring',
            datastr: gridJson,
            colNames: ['Id', 'Custom Field Name', 'Last Update', 'Action'],
            colModel: [{ name: 'Id', index: 'Id', hidden: true, classes: 'id' },
                       { name: 'Label', index: 'Label', width: 500 },
                       { name: 'LastUpdatedDate', index: 'LastUpdatedDate', width: 200 },
                       { 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
        });

.networks

Monday, 13 February 2012

JSON and jqGrid Example

No comments: