JQGrid set caption and column name

Question

I have a JQGrid whith 2 columns where I will got to the server and get some data, then I will concatenate some strings based on the filters on the server and want to set this as caption and also wants to change the columns names based on those filters. Is there a way to set the caption and columns names based on the ActionResult from the server ?

Answer 1

I find your question interesting.

We can start with the simple grid:

$("#list").jqGrid({
    url: 'ColumnNamesAndTitelFromServer.json',
    datatype: 'json',
    loadonce: true,
    colNames: ['Name', 'Email'],
    colModel: [
        {name: 'name', width: 100},
        {name: 'email', width: 150}
    ],
    rowNum: 5,
    rowList: [5, 10, 20],
    pager: '#pager',
    gridview: true,
    rownumbers: true,
    sortname: 'name',
    sortorder: 'asc',
    caption: 'Just simple local grid',
    height: 'auto'
});

and the JSON data:

{
    "total": 1,
    "page": 1,
    "records": 2,
    "rows": [
        {"id": "id1", "cell": ["John",    "[email protected]"]},
        {"id": "id2", "cell": ["Michael", "[email protected]"]}
    ]
}

We will receive the following results

(see the demo)

Now we extend the JSON data with our custom additional information:

{
    "total": 1,
    "page": 1,
    "records": 2,
    "rows": [
        {"id": "id1", "cell": ["John",    "[email protected]"]},
        {"id": "id2", "cell": ["Michael", "[email protected]"]}
    ],
    "userdata": {
        "title": "Das ist der Titel bestimmt beim Server",
        "columnNames": {
            "name": "Die Name",
            "email": "Die E-Mail"
        }
    }
}

In the example above I just define in userdata the title and the column names of the grid in German language. To read and to use the userdata we can add the following loadComplete event handler to the grid:

loadComplete: function () {
    var $grid = $(this), columnNames, name,
        userdata = $grid.jqGrid('getGridParam', 'userData');

    if (userdata) {
        if (userdata.title) {
            $grid.jqGrid('setCaption', userdata.title);
        }
        if (userdata.columnNames) {
            columnNames = userdata.columnNames;
            for (name in columnNames) {
                if (columnNames.hasOwnProperty(name)) {
                    $grid.jqGrid('setLabel', name, columnNames[name]);
                }
            }
        }
    }
}

Now the same grid will looks like

(see another demo)