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.
Demonstration how to read local data as array
//