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 content of the 2nd column only if the 1th column value is Movie:

 _______________________________________________________
|       COL 1       |               COL 2               |
|===================|===================================|
|   Movie           | bla bla yada yada                 |
|-------------------|-----------------------------------|
|   Song            |                                   |
|-------------------|-----------------------------------|
|   Clip            |                                   |
|-------------------|-----------------------------------|
|   Movie           | foo or bar that is the question...|
|-------------------|-----------------------------------|
|   Game            |                                   |
|___________________|___________________________________|

I've tried to use conditional OGNL expressions in hidden and cssClass fields of the GridColumnTag, but immediately noticed they evaluate once against the whole column, not at every "iteration".

As a workaround, I can manually hide the columns in that rows with javascript after the grid is populated, but that is a hack, and I'm wondering if there is a clean solution to conditionally "do something" on a columns per-row.

NOTE: I can't simply erase the content from the source List (as it would be obvious) because COL 2 in my real case is a Boolean, represented as checkbox.

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>