Question

I have a function on my server code that returns a list of ElementRow objects:

public class ElementRow {
    public string AreaName { get; set; }
    public YearData CurrentYear { get; set; }
    public YearData PreviousYear { get; set; }
}

public class YearData {
    public int Value1 { get; set; }
    public int Value2 { get; set; }
}

These classes generates a json like this one:

{"d":
    {
        "Total":2,
    "Page":1,
    "Records":30,
    "Rows":[
        {"AreaID":0,"CurrentYear":{"Value1":1,"Value2":2},"PreviousYear":{"Value1":1,"Value2":2}},
        {"AreaID":1,"CurrentYear":{"Value1":5,"Value2":4},"PreviousYear":{"Value1":1,"Value2":2}},
        {"AreaID":2,"CurrentYear":{"Value1":2,"Value2":1},"PreviousYear":{"Value1":1,"Value2":2}},
        {"AreaID":3,"CurrentYear":{"Value1":1,"Value2":3},"PreviousYear":{"Value1":1,"Value2":2}}
    ],
    "UserData":null
    }
}

I have defined the colModel to support this data structure and would like to create a custom formatter function to format object of type YearData in one column. My colModel is as follow:

$("#dashboard").jqGrid({
    url: wsBaseUrl + 'MyWebService.asmx/MyMethod',
    colNames: ['Area Name','Current Year', 'Previous Year'],
    colModel: [
        { name: 'AreaName', index: 'AreaName', width: 120, template: colTextTemplate },
        { name: 'CurrentYear', index: 'CurrentYear', width: 100, align: 'center', sortable: false, formatter: YearDataFormatter },
        { name: 'PreviousYear', index: 'PreviousYear', width: 100, align: 'center', sortable: false, formatter: YearDataFormatter }
    ],
    jsonReader: {
        id: "AreaID"
    },
    pager: $('#dashboard_pager'),
    sortname: 'AreaName',
    sortorder: "asc",
    height: '250',
    rownumbers: false,
    gridview: false,
    subGrid: true,

    //subgrid definition omitted
});

and then defined the YearDataFormatter function as follow:

function YearDataFormatter(cellvalue, options, rowObject) {
    var table = "<table><tr>";
    table += "<td>" + cellvalue.Value1 + "</td>";
    table += "<td>" + cellvalue.Value2 + "</td>";
    table += "</tr></table>";
    return table;
}; 

Anyway when I try to execute this function the problem is that inside the YearDataFormatter function the value of cellvalue parameter is undefined while, looking at it with the debugger, there is a valid value inside the rowObject parameter.

How can I access correctly the value of that cell?

Also, is there any chance to modify the header for a particular column? I would like to create a two-line header but if I add markup inside the colNames option the header height does not change accordingly.

Thanks for your support!

Answer 1

You don’t posted the JSON or XML data which are used to fill the grid and the definition of jqGrid. The local data or in case of the usage of loadone:true the internal data will be saved and all works in another way. So the custom formatter should be used depend on the settings.

Because I have not enough information I try to guess. I suppose that you should use

function YearDataFormatter(cellvalue, options, rowObject) {
    var table = "<table><tr>",
        cellData = rowObject.CurrentYear; // or like rowObject[2]
    table += "<td>" + cellData.Value1 + "</td>";
    table += "<td>" + cellData.Value2 + "</td>";
    table += "</tr></table>";
    return table;
};

The best would be to change the format of data which the server use for the date and use ISO 8601 date format. If you use .NET you can use “o” or “O” formatter of the DateTime. In the case you can use formatter:'date' or formatter:'date', formatoptions:{srcformat:'ISO8601Long'}.

UPDATED: I am sure that you use much more default settings in the jqGrid definition. Without additional settings you can’t read the JSON data. After small modification the demo read the data and I don’t see any problem with the custom formatter which you use: see here:

You can compare the demo with youth to see the differences.

About your second question (multiline data in the grid header) I recommend you to look at here: