jqgrid dynamic columns and data by json

Question

I new learned about jqgrid.I want create grid by dynamic data and columns. I asked my question and read this link but i needed more examples

Answer 1

In comments to my answer on your previous answer I described shortly the idea how you can change the column headers based on the data returned from the server. To make all more clear I prepared a demo for you.

I tried to make the demo mostly short and clear, so it has some restrictions:

• number of columns not changed in different responses from the server
• the formatters and the width of the column will be not changed in different responses from the server.

All the restrictions can be reduced or removed, but in your case the above restrictions are suffused. Moreover I wanted first describe the main idea of the implementation.

The demo has tree buttons above the grid which allows to reload data from the server, but from different URLs. After clicking on "Load Russian headers" button the headers on the grid will be dynamically changed with the texts from the server response and one will see the following picture

The format of the data is like below:

{
    "model": {
        "c1": { "label": "Client" },
        "c2": { "label": "Date" },
        "c3": { "label": "Amount" },
        "c4": { "label": "Tax" },
        "c5": { "label": "Total" },
        "c6": { "label": "Paid" },
        "c7": { "label": "Shipped via" },
        "c8": { "label": "Notes" }
    },
    "data": [
        {"id": "10",  "cell": ["test",   "2007-10-01", "200.00", "10.00", "210.00", "true",  "TN", "note"  ] },
        {"id": "20",  "cell": ["test2",  "2007-10-02", "300.00", "20.00", "320.00", "false", "FE", "note2" ] },
        {"id": "30",  "cell": ["test3",  "2007-09-01", "400.00", "30.00", "430.00", "false", "FE", "note3" ] },
        {"id": "40",  "cell": ["test4",  "2007-10-04", "200.00", "10.00", "210.00", "true",  "TN", "note4" ] },
        {"id": "50",  "cell": ["test5",  "2007-10-31", "300.00", "20.00", "320.00", "false", "FE", "note5" ] },
        {"id": "60",  "cell": ["test6",  "2007-09-06", "400.00", "30.00", "430.00", "false", "FE", "note6" ] },
        {"id": "70",  "cell": ["test7",  "2007-10-04", "200.00", "10.00", "210.00", "true",  "TN", "note7" ] },
        {"id": "80",  "cell": ["test8",  "2007-10-03", "300.00", "20.00", "320.00", "false", "FE", "note8" ] },
        {"id": "90",  "cell": ["test9",  "2007-09-01", "400.00", "30.00", "430.00", "false", "TN", "note9" ] },
        {"id": "100", "cell": ["test10", "2007-09-08", "500.00", "30.00", "530.00", "true",  "TN", "note10"] },
        {"id": "110", "cell": ["test11", "2007-09-08", "500.00", "30.00", "530.00", "false", "FE", "note11"] },
        {"id": "120", "cell": ["test12", "2007-09-10", "500.00", "30.00", "530.00", "false", "FE", "note12"] }
    ]
}

The most important part of the JavaScript code is

jsonReader: { root: "data" },
beforeProcessing: function (data) {
    var $self = $(this), model = data.model, name, $colHeader, $sortingIcons;
    if (model) {
        for (name in model) {
            if (model.hasOwnProperty(name)) {
                $colHeader = $("#jqgh_" + $.jgrid.jqID(this.id + "_" + name));
                $sortingIcons = $colHeader.find(">span.s-ico");
                $colHeader.text(model[name].label);
                $colHeader.append($sortingIcons);
            }
        }
    }
}

Full JavaScript used in the demo is below

var $grid = $("#list");
$grid.jqGrid({
    url: "DynamicHeaderProperties.json",
    datatype: "json",
    colModel: [
        { name: "c1", width: 70 },
        { name: "c2", width: 80, align: "center", sorttype: "date",
            formatter: "date", formatoptions: {newformat: "m/d/Y"}, datefmt: "m/d/Y"},
        { name: "c3", width: 70, formatter: "number", align: "right",
            editrules: {required: true, number: true}, editable: true},
        { name: "c4", width: 60, formatter:"number", align: "right", editable: true,
            editrules:{required: true, number: true}},
        { name: "c5", width: 110, formatter: "number", align:"right",
            editrules:{required:true,number: true}, editable: true},
        { name: "c6", width: 80, align: "center", editable: true,
            formatter:"checkbox",edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}},
        { name: "c7", width: 110, align: "center", formatter: "select", editable: true,
            edittype: "select", editoptions: {value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "Intime"}},
        { name: "c8", width: 90, sortable: false, editable:true}
    ],
    rowNum: 10,
    rowList: [5,10,20],
    pager: "#pager",
    gridview: true,
    rownumbers: true,
    sortname: "c2",
    viewrecords: true,
    sortorder: "desc",
    caption: "Setting coloumn headers dynamicaly",
    jsonReader: { root: "data" },
    beforeProcessing: function (data) {
        var $self = $(this), model = data.model, name, $colHeader, $sortingIcons;
        if (model) {
            for (name in model) {
                if (model.hasOwnProperty(name)) {
                    $colHeader = $("#jqgh_" + $.jgrid.jqID(this.id + "_" + name));
                    $sortingIcons = $colHeader.find(">span.s-ico");
                    $colHeader.text(model[name].label);
                    $colHeader.append($sortingIcons);
                }
            }
        }
    },
    loadonce: true,
    height: "auto"
});
$("#en").button().click(function () {
    $grid.jqGrid("setGridParam", {
        datatype: "json",
        url: "DynamicHeaderProperties.json",
    }).trigger("reloadGrid", {current: true});
});
$("#ru").button().click(function () {
    $grid.jqGrid("setGridParam", {
        datatype: "json",
        url: "DynamicHeaderPropertiesRu.json",
    }).trigger("reloadGrid", {current: true});
});
$("#de").button().click(function () {
    $grid.jqGrid("setGridParam", {
        datatype: "json",
        url: "DynamicHeaderPropertiesDe.json",
    }).trigger("reloadGrid", {current: true});
});