Dynamically Defining a jqGrid

I am trying to make an ad-hoc query page for our ASP.NET MVC 2 application. This page is secured and used strictly for technical administrative access on our intranet. We want the ability to query a handful of tables and I don't want to have to have a page/grid per query. I have an MVC controller that returns a JSON result that includes the following values (I got these from client-side javascript alerts, so I know this is what these values look like "at the grid"):

colNames contains:

['AccountID','ClientID']

colModel contains:

[{editable:false,index:'AccountID',jsonmap:'AccountID',key:false,name:'AccountID',resizable:true,sear开发者_JAVA百科ch: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:

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);
        }
    });
});

I have been putting this together based on a couple of related posts/replies here at Stack Overflow, as well as the jqGrid wiki. I am pretty sure that I am very, very close ... but it's just not working out.

The problem I am having is that the jqGrid throws an error "Length of colNames <> colModel!" and I can't seem to figure out what it is about my JSON strings that it doesn't like.

Anyone see what I am missing here?

I suppose that the data which you receive as result.colNames and result.colModel are strings and not objects.

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
});

By the way some properties which you use in the colModel parameters are default. The parameter shrinkToFit: true is also default. So you can reduce to

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

If you will use jsonReader: { repeatitems: false, cell:"" } then it can be more shorter

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

Probably what you really wanted is to send the result.colNames and result.colModel as a JSON strings which can be converted to objects for example withj respect of jQuery.parseJSON. In the case you should change a little the format of the data in the result.colNames and result.colModel. Following code will also work

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
    });

One more small remark. You don't use key:true or id values in the jqGrid data. It is potentially dangerous. You should understend that jqGrid use id="1", id="2" and so on if no id exist in the data. The problem can be if you use two or more such grids on one page. You can receive double ids very easy which is not allowed.