Store related row data?

Question

I'm looking for the best way to store per row data. I found a working way using hidden columns (hidden: true in colModel), but that option will still create DOM nodes for the hidden cells, and that seems to be a waste for me. Is there better way?

Answer 1

First of all one should specify how one use jqGrid. If one uses datatype: "local" then one have no need to create any hidden columns. Instead of that the input data can contains the items like

{ id: 123, name: "item name", price: 45.67,
    orders: [
        { total: 1543.54, data: "2015-10-02" }
        { total: 1633.71, data: "2015-10-01" }
    ] }

and the orders array will be saved in data array as the part of every item. In other words you can hold any number of additional properties of any type which will be saved in the local data. One can use getLocalRow method to get all the data. For example one can use something like $("#grid").jqGrid("getLocalRow", "123") to get the data associated with the row having id="123".

If one uses datatype: "json" and loads the data from the server then one can use another options. Free jqGrid 4.9 and higher supports additionalProperties parameter. So instead of creating hidden columns prop1 and prop2 which exists in the input data you can just use additionalProperties: ["prop1", "prop2"]. It informs jqGrid to read the data from input. One can use a little more sophisticated for on additionalProperties items to read more complex data and to associate the to the row. The main advantage of the usage additionalProperties: the specified properties are accessible in custom formatters and the properties will be saved locally if one use loadonce: true.

If somebody used TreeGrid then one could see many hidden columns (level, parent, isLeaf, expanded, loaded, icon) which are saved additionally in the local data. The hidden columns was not used internally since many versions of jqGrid. Starting with version 4.9 free jqGrid don't creates the unneeded columns and makes DOM of the page shorter. Free jqGrid uses additionalProperties in the case (see the wiki article).

In one can't currently migrate to free jqGrid then one can use another workaround. One can use userdata to save additional information associated with the grid. One can either include userdata directly in the server response with all required information or one can use beforeProcessing callback to parse input data and to fill additional userdata before the input data will be parsed by jqGrid. I recommend to read the old answer for the corresponding code example. The main idea is in building userdata as map by rowid. The items of the map should contains the additional properties:

userdata: {
    /* properties of userdata could be the rowids */
    123: {
        /* the data could contains the object with additional properties */
        orders: [
            { total: 1543.54, data: "2015-10-02" }
            { total: 1633.71, data: "2015-10-01" }
        ]
    }
}

It allows to use

var addProp = $(this).jqGrid("getGridParam", "userData");

and to access additional properties using addProp[rowid].orders.