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

can you show your grid code and code where you form rows and cols? — teo van kot, Jan 13 '15 at 08:21

Oleg · Accepted Answer · 2015-01-15T12:25:48.190

5

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)).

edited Jan 15 '15 at 12:25

answered Jan 15 '15 at 06:19

Oleg

220,925
34
403
798

Thanks oleg. I've replaced `'` to `/` and still got some errors. INVALID JSON. – JVELASCO Jan 21 '15 at 08:51
I suggested to replace `'` to `"` . If you use `"` in C# inside of another string it should be escaped. So you need replace `string sColumnModels = "[{ name: 'ID', key: true, hidden: true }, ";` to `string sColumnModels = "[{ name: \"ID\", key: true, hidden: true }, ";` for example. You should do the same with all options. – Oleg Jan 21 '15 at 08:57
Hi @Oleg, Already changed the code but still have some errors. **ColumnName:** SyntaxError: JSON.parse: expected ':' after property name in object at line 1 column 7 of the JSON data `"[{"ID", "Account", "Lob", "C01_04_2015", "C01_11_2015", "C01_18_2015", "C01_25_2015", "Report"}]"` – JVELASCO Jan 22 '15 at 02:56
**ColumnModel** SyntaxError: JSON.parse: expected property name or '}' at line 1 column 4 of the JSON data `"[{ name: "ID", key: true, hidden: true }, { name: "Account", width: 150, align: "center" }, { name: "Lob", width: 150, align: "center" }, { name: "C01_04_2015", width: 150, editable: true}, { name: "C01_11_2015", width: 150, editable: true}, { name: "C01_18_2015", width: 150, editable: true}, { name: "C01_25_2015", width: 150, editable: true}, { name: "Report", width: 150, align: "center" }]"` – JVELASCO Jan 22 '15 at 02:59
Hi @Oleg! It worked! I just made some changes on my string output using the online JSON parser. Thank you!! – JVELASCO Jan 22 '15 at 05:24
@JVELASCO, exactly what did you do convert the strings to JSON array? – vijay yaragall Oct 23 '18 at 16:54

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

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...

edited May 23 '17 at 12:16

Community

1
1

answered Jan 13 '15 at 08:51

teo van kot

12,350
10
38
70

thanks teo for the response. i've already change columnModel > columnModel.items. jqgrid worked but there's no data to show. when I checked it on FireBUg, ColumnModel.items = 'undefined'. Am I missing something on my code? or my ColumnModel are properly setup? Thanks in advance! – JVELASCO Jan 14 '15 at 01:49
i suppose it happends becouse you have you `columnModel` field as a `string`, i think `Json()` method in controller serialize it wrong way, unexpected for `jqgrid`. try to change it to `List` and add each row data. – teo van kot Jan 14 '15 at 20:20

score 0 · Answer 3 · answered Jan 14 '15 at 15:54

0

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

answered Jan 14 '15 at 15:54

Tony Tomov

3,122
1
11
18

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

3 Answers3