jqGrid: conditionally hide / show column content **per row**

Question

Is there any way to target a column in a jqGrid (in my case, Struts2-jQuery-Grid Plugin 3.7.0) on certain rows only ?

For example, I want to show the conten

Answer 1

There are many ways how you can implement the requirement. One of the most easy is the setting of color: transparent; CSS on the cells which you need to hide. For example you define the CSS rule

.hiddenCell { color: transparent; }

and you assign the class hiddenCell to specified cells of the "COL 2". You can use cellattr property of "COL 2" for it:

cellattr: function (rowId, val, item) {
    if (item.sent) {
        return " class='hiddenCell'";
    }
}

The demo demonstrates the approach. Disadvantage of the approach - the hidden text still exist on HTML page and so one can examine it if required.

Another way is the usage of custom formatters. For example you can define the following formatter callback

formatter: function (cellValue, options, item) {
    return item.sent ? "" : $.jgrid.htmlEncode(cellValue);
}

The demo demonstrates the second approach. Disadvantage of the approach - it's a little difficult to combine usage of custom formatter with another formatter (like formatter: "select" in the example above). Nevertheless one can do it too:

formatter: function (cellValue, options, item, action) {
    return item.sent ?
        "" :
        $.fn.fmatter.call(
            this,
            "select",
            cellValue,
            options,
            item,
            action);
}

like the next demo.

If you loads the data from the server then probably the best choice would be to modify the input data (the input data for the column "COL 2") inside of beforeProcessing callback. See the answer or this one for code examples.

Answer 2

For the records, the solution for the (fake) scenario described in the question (using Struts2-jQuery-Grid Plugin instead of the raw jqGrid) would be:

<script>
   function conditionalFormatter(cellValue, options, rowObject) {
       return rowObject.type!="Movie" ? "&nbsp;" : $.jgrid.htmlEncode(cellValue);
   }
</script>

<s:url id="remoteurl" action="myStrutsAction" namespace="/myNamespace" />

<sjg:grid href="%{remoteurl}" dataType="json"  gridModel="gridModel" >
    <sjg:gridColumn title="Col 1" name="type" />
    <sjg:gridColumn title="Col 2" name="foo" formatter="conditionalFormatter" />
</sjg:grid>