Bind jQuery Grid without service call

Query Grid plugin is an Ajax Enabled Javascript control that represents tabular data on web page. It loads data on client side, dynamically through Ajax callbacks.
To bind the grid using jqGrid plugin you have to provide raw data in the format of XML data, JSON, or in array format. And for binding the grid dynamically, the data can be obtained from database using Ajax Service call.

The general syntax for binding the data using a service call is

//Bind List Grid

jQuery('#gridId').jqGrid({
 
     datatype: "json",
     url: '/MyDemoService/GridService.svc/GetGridData,
     colNames: ['Country', 'Capital'],
     colModel: [{ name: 'Country', index: 'Country' }, { name: 'Capital', index: 'Capital'}],
     hoverrows: false, page: 1, scrollrows: false, shrinkToFit: false, viewrecords: true,        
     gridComplete: function () {
  
     }
});

But what if you don’t need a service call or you don’t need data to be collected from DB. For example you may have to get the data form the Page cookie and display them in the grid. Then first

You have to convert those data into JSON or simple ARRAY format before passing into the plugin for processing.
Then use datatype as ‘local’ instead of ‘json’.
Mention other grid properties like height, width, colName, colModel as required.
Finally to pass the data use the jqGrid ‘addRowData’ function.

eg:

Inside the script block, in the very first step I have all my raw datas are declared, and when the for loop ends the JSON datas are ready to be sent into the plugin.

The JSON data will looklike

[
 Object { Country="India", Capital="Delhi", President="Smt. Prathiva Patil"}, 
 Object { Country="Sri Lanka", Capital="Colombo", President="Mahinda Rajapaksa"}, 
 Object { Country="Bangladesh", Capital="Dhaka", President="Zillur Rahman"},
 Object { Country="USA", Capital="Washington", President="B. Obama"},
 Object { Country="Russian Federation", Capital="Moscow", President="Dmitry Medvedev"}
]

Copy the below code into a notepad and save it as html file to see the output.

<!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">
 
<head>
 
    <title>Demonstration how to read local data as array</title>
 
    <link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.multiselect.css" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>    
    <script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> 
    <script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
    <script type="text/javascript">
 
    //<![CDATA[
 
    jQuery(document).ready(function () {
 
       // Array of Raw Data.
       var data = [["India", "Delhi", "Smt. Prathiva Patil"], 
                   ["Sri Lanka", "Colombo", "Mahinda Rajapaksa"],
                   ["Bangladesh", "Dhaka", "Zillur Rahman"],
                   ["USA", "Washington", "B. Obama"],
                   ["Russian Federation", "Moscow", "Dmitry Medvedev"]];
    
       // Creating the JSON data.
       var names = ["Country", "Capital", "President"];
       var mydata = [];
 
       for (var i = 0; i < data.length; i++) {
          mydata[i] = {};
          for (var j = 0; j < data[i].length; j++) {
               mydata[i][names[j]] = data[i][j];
          }
       }
   
       jQuery("#myGrid").jqGrid({
          datatype: "local",
          height: 110,
          width: 350,
          colNames: ['Country', 'Capital', 'President'],
          colModel: [
                 {name: 'Country', index: 'Country', width: 30},
                 {name: 'Capital', index: 'Capital', width: 30},
                 {name: 'President', index: 'President', width: 40}],    
          caption: "Contry - Capital - President",
          gridComplete: function () {
               $("#myGrid").setGridWidth($("#divGrid").width());
          }
       });  
 
        // Add the data to grid
       for (var i = 0; i <= mydata.length; i++) {
          jQuery("#myGrid").jqGrid('addRowData', i + 1, mydata[i]);
       }
   });
 
   //]]>
 
</script>
</head>
 
<body>
 <div id="divGrid" style="width : 350px">
  <table id="myGrid"><tr><td/></tr></table>
  <div id="gridPager"/>
 </div>
</body>
 
</html>

TUSHAR MISHRA , JavaScript Programmer, Mindfire Solutions.

Related Tags: JavaScript, jQuery, jQuery Grid

Author : TUSHAR MISHRA

Bind jQuery Grid without service call

Leave a Reply

Subscribe With Us