JqGrid dynamic definition

Question

I am trying to create a special request page for our ASP.NET MVC 2 application. This page is protected and used strictly for technical administrative access on our intranet. We want to be able to query multiple tables, and I don't want to have a page / grid for each query. I have an MVC controller that returns a JSON result that includes the following values ​​(I received them from client javascript warnings, so I know that these values ​​look like "in the grid"):

colNames contains:

['AccountID','ClientID']

colModel contains:

[{editable:false,index:'AccountID',jsonmap:'AccountID',key:false,name:'AccountID',resizable:true,search:false,sortable:true,width:300},
 {editable:false,index:'ClientID',jsonmap:'ClientID',key:false,name:'ClientID',resizable:true,search:false,sortable:true,width:300}]

colData contains:

{total:1,page:1,records:1,rows:[{AccountID:1,ClientID:1}]}

And, on the client, my jqGrid looks like this:

jQuery(document).ready(function () {

    $.ajax({
        type: 'POST',
        url: '<%: Url.Action("GetData", "Support") %>',
        data: { query: 'foo' },
        dataType: 'json',
        success: function (result) {

            alert(result.colNames);
            alert(result.colModel);
            alert(result.colData);

            jQuery('#QueryGrid').jqGrid({
                jsonReader: { repeatitems: false },
                shrinkToFit: true,
                datatype: 'jsonstring',
                colNames: result.colNames,
                colModel: result.colModel,
                datastr: result.colData,
                viewrecords: true
            });
        },
        error: function (x, e) {
            alert(x.readyState + ' ' + x.status + ' ' + e.msg);
        }
    });
});

/ , Stack Overflow, wiki jqGrid. , , ... .

, , , jqGrid "Length of colNames < > colModel!" , JSON, .

- , ?

Answer 1

, , result.colNames result.colModel , , .

var cn = ['AccountID','ClientID'];
var cm = [
    {editable:false,index:'AccountID',jsonmap:'AccountID',key:false,name:'AccountID',
     resizable:true,search:false,sortable:true,width:300},
    {editable:false,index:'ClientID',jsonmap:'ClientID',key:false,name:'ClientID',
     resizable:true,search:false,sortable:true,width:300}];
var cd = '{total:1,page:1,records:1,rows:[{AccountID:1,ClientID:3}]}';
jQuery('#QueryGrid').jqGrid({
    jsonReader: { repeatitems: false },
    height: 'auto',
    colNames: cn,
    colModel: cm,
    datastr: cd,
    viewrecords: true
});

, , colModel, . shrinkToFit: true . ,

[{index:'AccountID',jsonmap:'AccountID',name:'AccountID',search:false,width:300},
 {index:'ClientID',jsonmap:'ClientID',name:'ClientID',search:false,width:300}]

jsonReader: { repeatitems: false, cell:"" },

[{index:'AccountID',name:'AccountID',search:false,width:300},
 {index:'ClientID',name:'ClientID',search:false,width:300}]

, result.colNames result.colModel JSON, , , jQuery.parseJSON. , result.colNames result.colModel.

var cnStr = '["AccountID","ClientID"]';
var cmStr = '[{"index":"AccountID","name":"AccountID","search":false,"width":300},{"index":"ClientID","name":"ClientID","search":false,"width":300}]';
var cd = '{total:1,page:1,records:1,rows:[{AccountID:1,ClientID:3}]}';
jQuery('#QueryGrid').jqGrid({
        jsonReader: { repeatitems: false, cell:"" },
        datatype: 'jsonstring',
        height:'auto',
        colNames: jQuery.parseJSON(cnStr),
        colModel: jQuery.parseJSON(cmStr),
        datastr: cd,
        viewrecords: true
    });

. key:true id jqGrid. . , jqGrid id = "1", id = "2" , id. , . , .