Length of colnames <> colmodel when using dynamic colNames & colModel

Question

In my mvc jqgrid code, colnames and colmodel returning same length of col. but when run the application im getting this error. Any help?

Code :

public WeekColumns GetWeekColumns(DateTime start, DateTime end)
    {
        WeekColumns week = new WeekColumns();

        string sWeekDate = string.Empty;

        var model = db.GetWeek(start.ToString("MM/dd/yyyy"),
            end.ToString("MM/dd/yyyy")).ToList().Select(s => s.WeekDate.ToString());

        IEnumerable<string> sModel = new List<string>();
        sModel = model;

        string sColumnNames = "['ID', 'Account', 'Lob'";

        foreach (string item in sModel)
            sColumnNames += ", 'C" + item.ToString().Replace("/", "_").Trim() + "'";

        sColumnNames += ", 'Report']";

        string sColumnModels = "[{ name: 'ID', key: true, hidden: true }, ";
        sColumnModels += "{ name: 'Account', width: 150, align: 'center' }, ";
        sColumnModels += "{ name: 'Lob', width: 150, align: 'center' }";

        foreach (string item in sModel)
            sColumnModels += ", { name: 'C" + item.ToString().Replace("/", "_").Trim() + 
                "', width: 150, editable: true}";

        sColumnModels += ", { name: 'Report', width: 150, align: 'center' }]";

        week.ColumnName = sColumnNames;
        week.ColumnModel = sColumnModels;

        return week;
    }

js :

$.ajax({
        url: "Staffing/GetWeekDate",
        type: 'POST',
        dataType: 'json',
        contentType: "application/json",
        cache: false,
        success: function (data) {
            $("#jqTable").jqGrid({
                // Ajax related configurations
                url: "Staffing/LOBStaffing",
                datatype: "json",
                mtype: "POST",
                //ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                jsonReader: {
                    root: 'rows',
                    page: 'page',
                    total: 'total',
                    records: 'records',
                    repeatitems: true,
                    data: 'data'
                },

                // Specify the column names
                colNames: data.ColumnName,

                // Configure the columns
                colModel: data.ColumnModel,

                // Grid total width and height  
                width: 900,
                height: 350,

                sortname: 'Lob',
                // Paging
                rowList: [],        // disable page size dropdown
                pager: $("#jqTablePager"),
                pgbuttons: false,     // disable page control like next, back button
                pgtext: null,         // disable pager text like 'Page 0 of 10'
                viewrecords: true,
                rowNum: 2000,

                grouping: true,
                groupingView: {
                    groupField: ['Account', 'Lob'],
                    groupColumnShow: [true, true],
                    groupText: ['<b>{0}</b>'],
                    groupCollapse: false,
                    groupOrder: ['asc', 'asc'],
                    groupSummary: [true, true]
                },

                // Grid caption
                caption: "List of Forms"
            }).navGrid("#jqTablePager",
                {
                    refresh: true,
                    add: false,
                    edit: false,
                    del: false,
                    search: false,
                    refreshtext: "Refresh",
                    searchtext: "Search"
                },
                {}, // settings for edit
                {}, // settings for add
                {}, // settings for delete
                {multipleGroup: true }, // settings for search,
                {
                multipleGroup: true,
                sopt: ["cn", "eq"],
                caption: "Search",
                Find: "Search"
            }); // Search options. Some options can be set on column level

        },
        error: function () {
            alert('error');
        }
    });

Answer 1

The values of colNames and colModel should be arrays of items of the same size. It seems that your current code try to assign strings with the text like "['ID', 'Account', 'Lob', ...]" and "[{ name: 'ID', key: true, hidden: true }, ...]". The code of jqGrid which try to compare the number of items in arrays colNames and colModel (see here) compare the length of the strings which you use as the values of colNames and colModel. So the displayed message is mot correct, but your input data are still wrong.

So to solve the problem you have to fix the format (change the type) of data.ColumnName and data.ColumnModel.

You can for example replace ' in data.ColumnName and data.ColumnModel to \". It makes the strings as correct JSON trings and you could use $.parseJSON() (I mean just colNames: $.parseJSON(data.ColumnName), colModel: $.parseJSON(data.ColumnModel)).

Answer 2

You can omit using colNames array. It is beter to use colModel with set of label

the code

colNames : ['My Name',....], colModel : [ {name:'myname',...}, ...],

is equivalent to

colModel : [ {name:'myname', label: 'My Name', ...}, ...],

Kind Regards

Answer 3

Try to change colModel: data.ColumnModel to colModel: data.ColumnModel.items it's from @Oleg answer.

Sometimes i think @Oleg already answer to all jqgrid related questions...