Load JSON Data inline

by A B

HTML

<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<table id="list47"></table>
<div id="plist47"></div>
<br />
<input type="button" value="Rows Selected" id="getSelection" name="getSelection" />

JavaScript

$("#getSelection").click(function() {
    alert("adding rows ...");
    jQuery("#list47").addJSONData(mydata);   
});

jQuery("#list47").jqGrid({
    // data: mydata,
    datatype: "local",
    height: 150,
    rowNum: 999999,
    scroll: true,
        colNames: ['Name'],
        colModel: [
                   { name: 'Name', index: 'Name', sortable: false, width: 730, align: 'left' }
                      ],
    pager: "#plist47",
    viewrecords: true,
    // multiselect: true,
    caption: "Manipulating Array Data"
});


var mydata = [{"total":1,"page":1,"records":3,"rows":[{"id":"c2e68023-951e-4b79-be44-9e9500a62c6b","cell":["Administrators"]},{"id":"33849980-a0f4-498c-a54e-9e9500a62c83","cell":["Supervisori"]},{"id":"2ed80eab-66a0-448d-ac63-9e9500a62c88","cell":["UtentiSito"]}]}
{"page":1,"records":1,"rows":[{"id":1,"cell":[94,"DAMIEN","IS AN IDIOT"]}],"total":1}];