zouza zouza - 2 months ago 10
Javascript Question

Format multiple columns depending on the value of one

Can I use a custom formatter on a cell A to modify a cell B ?

Answer

Your original demo http://jsfiddle.net/fo3wb58w/12/ shows what you want. In general, you use already one formatter function shared by multiple columns. If you would click on the column header of the column PLA, MCO, SUP or REX you will see nothing happens. The problem is: you use datatype: "local", which holds the internal data of the grid in the data and _index parameters. The data will be used during sorting and filtering/searching of the local data. Formatting is just the form to display the corresponding data. Thus I would recommend you to fill the column data for every column first and only then format the data. It will saves correct data in the data parameter and will allows to sort and filter the data.

The simplest modification of the demo will consist from including localReader

localReader: {
    repeatitems: true,
    cell: function (item) {
        var rowData = $.parseJSON(item.data);
        rowData.data = item.data; // include the original data too
        return rowData;
    }
}

and modification of your custom formatter to the following, for example,

function format (cellvalue) {
    if (cellvalue !== undefined) {
        return '<div class="led-box"><div class="' +
            (cellvalue !== null ? 'led-green' : 'led-red') +
            '"></div></div>';
    } else {
        return '';
    }
}

See http://jsfiddle.net/OlegKi/fo3wb58w/14/. Now we will fill the data, which allows us to sort there. I use in the demo the latest version of free jqGrid because jqGrid 4.6, which you used in the original demo has the bug with processing of localReader which has repeatitems: true.

More deep modification will be http://jsfiddle.net/OlegKi/fo3wb58w/15/

var mydata = [
        { data: "{\"pla\":1,\"mco\":null,\"sup\":null}" },
        { data: "{\"pla\":null,\"mco\":1,\"sup\":1}" },
        { data: "{\"pla\":1,\"rex\":null}" }
    ],
    sortRedGreen = function (value) {
        switch (value) {
            case 1:
                return 2;
            case null:
                return 1;
            default:
                return 0;
        }
    },
    formatRedGreen = function (cellvalue) {
        if (cellvalue !== undefined) {
            return '<div class="led-box"><div class="' +
                (cellvalue !== null ? 'led-green' : 'led-red') +
                '"></div></div>';
        } else {
            return '';
        }
    },
    templateRedOrGreen = {
        width: 48,
        sorttype: sortRedGreen,
        stype: "select",
        searchoptions: { value: "undefined:Undef;null:Null;1:1", noFilterText: "Any"},
        formatter: formatRedGreen
    };

$("#grid").jqGrid({
    data: mydata,
    autoencode: true,
    colModel: [
        { name: 'data', width: 250, search: false },
        { label: 'PLA', name: 'pla', template: templateRedOrGreen },
        { label: 'MCO', name: 'mco', template: templateRedOrGreen },
        { label: 'SUP', name: 'sup', template: templateRedOrGreen },
        { label: 'REX', name: 'rex', template: templateRedOrGreen }
    ],
    localReader: {
        repeatitems: true,
        cell: function (item) {
            var rowData = $.parseJSON(item.data);
            rowData.data = item.data; // include the original data too
            return rowData;
        }
    },
    iconSet: "fontAwesome",
    caption: "Stack Overflow Example"
}).jqGrid("filterToolbar");

It uses custom sorttype function which allow to reorder the possible value undefined, null and 1 during sorting. It uses filterToolbar with

stype: "select",
searchoptions: { value: "undefined:Undef;null:Null;1:1", noFilterText: "Any"}

to simplify filtering of the data.

Comments