Geek Answers Handbook

Setting JQGrid colName and colModel from JSON data

I am trying to create a list of column names and a column model on the server and pass it to JqGrid. I successfully created JSON and passed it to the client via XHR, there are no complaints. But the grid itself does not appear. I see one column of a grid with a button to bend / expand the grid at the top.

Here is the javascript call:

var col_names = []; var col_model = []; ... ... jQuery(document).ready(function() { //XHR to get col_names and col_model $.ajax({url: 'http://localhost:8080/metadata', success: function(data) { col_names = data.names; col_model = data.model; } }); jQuery("#list").jqGrid({ url:'http://localhost:8080:/data?level=0', datatype: 'json', mtype: 'GET', colNames: col_names, colModel: col_model, ... ...

Here is the JSON:

 { "model": [{"index": "pid", "name": "pid"}, {"index": "p1", "name": "p1"}, {"index": "p2", "name": "p2"}], "names": ["PID", "P1", "P2"] }

Grid is displayed if I hard code colModel. BTW, in the response headers the content type is set to "application / json".

TIA

+2
json jqgrid
source share
1 answer

In your published code, you initialize jqGrid before ending the AJAX call:

 jQuery(document).ready(function() { //XHR to get col_names and col_model $.ajax({url: 'http://localhost:8080/metadata', success: function(data) { col_names = data.names; col_model = data.model; } }); jQuery("#list").jqGrid({ ...

You need to either move the jqGrid code to the success function, or set the async parameter to false in your $.ajax call.

While the AJAX call is waiting, you can display a counter or such on the page so that the user is not busy.

+3
source share

More articles:


All Articles