jqgrid is binding with no data but just empty columns

Question

I want to bind the grid to the below table

 <table class="table table-bordered table-striped" id="tblJQGrid"></table>

I have a stringified object

 var obj= "[{"Rule":80,
             "RegionsCount":3,
             "TotalMarketsize":561393.6501688622,
             "CompanyMarketsize":72495.11226586788,
             "Share":12.913418640211196
          },
          {"Rule":20,
           "RegionsCount":7,
           "TotalMarketsize":438981.8470979482,
           "CompanyMarketsize":56358.24418920174,
           "Share":12.83839971100827
      }]";

Which i am trying to bind to a jqgrid,

like this,

 $("#tblJQGrid").jqGrid("GridUnload");
        $("#tblJQGrid").jqGrid(
        {
         mtype: 'GET',
         data: obj,
         colNames: ['Rule', 'RegionsCount', 'TotalMarketsize', 'CompanyMarketsize', 'Share'],
         colModel: [
         { name: 'Rule', index: 'Rule', width: 20, stype: 'text' },
         { name: 'RegionsCount', index: 'RegionsCount', width: 150 },
         { name: 'TotalMarketsize', index: 'TotalMarketsize', width: 150 },
         { name: 'CompanyMarketsize', index: 'CompanyMarketsize', width: 150, align: "right" },
         { name: 'Share', index: 'Share', width: 150, align: "right" }
         ],
         rowNum: 2,
         //rowNum: 10,
         loadonce: false,
         shrinkToFit: true,
         forceFit: true,
         emptyrecords: 'No records to display',
         hoverrows: true,
         rownumbers: false,
         viewrecords: true,
     });

But this is how the grid is binding

Can someone tell me where i am going wrong?

Answer 1

Here you go with the solution http://jsfiddle.net/yNw3C/16032/

var obj=
'[{"Rule":80,"RegionsCount":3,"TotalMarketsize":561393.6501688622,"CompanyMarketsize":72495.11226586788,"Share":12.913418640211196},{"Rule":20,"RegionsCount":7,"TotalMarketsize":438981.8470979482,"CompanyMarketsize":56358.24418920174,"Share":12.83839971100827}]';

$("#tblJQGrid").jqGrid("GridUnload");
        $("#tblJQGrid").jqGrid({
         datatype: "local",
         data: JSON.parse(obj),
         colNames: ['Rule', 'RegionsCount', 'TotalMarketsize', 'CompanyMarketsize', 'Share'],
         colModel: [
         { name: 'Rule', index: 'Rule', width: 20, stype: 'text' },
         { name: 'RegionsCount', index: 'RegionsCount', width: 150 },
         { name: 'TotalMarketsize', index: 'TotalMarketsize', width: 150 },
         { name: 'CompanyMarketsize', index: 'CompanyMarketsize', width: 150, align: "right" },
         { name: 'Share', index: 'Share', width: 150, align: "right" }
         ],
         rowNum: 2,
         //rowNum: 10,
         loadonce: false,
         shrinkToFit: true,
         forceFit: true,
         emptyrecords: 'No records to display',
         hoverrows: true,
         rownumbers: false,
         viewrecords: true,
     });

<link href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<table class="table table-bordered table-striped" id="tblJQGrid"></table>

You forgot to add dataType as 'local' as well as data was referring to wrong variable