jquery - jqGrid footer cells "inherits" CSS from cells in the main grid

Question

I have a footerrow in my jqGrid where I sum up the values in some of the columns. I set the footer using the 'footerData' function when the grid has completed loading. This requires the 'footerrow' property in the grid-options to be set to 'true'. Some of the columns which I don't sum up have CSS applied to them (to show some icons in the cells), which is set using the 'classes' property in the colModel API. The problem is that these CSS-classes are also applied to the cells in the footerrow. I don't want them applied there, but I don't know how to prevent them from being shown. I tried to use jQuery to remove the 'class' property from the td elements after calling the 'footerData' function. The problem is that while the grid is loading, the icons are flashed to the user. How can I prevent the CSS from being applied in the first place?

Answer 1

With respect of Developer Tools from IE8 or Firebug in Firefox you can examine structure of div's and other tables after creating a jqGrid. There are main div with the class "ui-jqgrid-view". It have child div's with following classes:

• "ui-jqgrid-titlebar" - title bar
• "ui-jqgrid-hdiv" - headers with column textes (header)
• "ui-jqgrid-bdiv" - with the main information (body)
• "ui-jqgrid-sdiv" - its what you needs

If your jqGrid has id="list", then jQuery('#list')[0].parentNode.parentNode.parentNode - is the main grid view div (parents of all jqGrid HTML elements) as a DOM element:

var gviewNode = jQuery('#list')[0].parentNode.parentNode.parentNode;
var hdiv = jQuery(".ui-jqgrid-hdiv", gviewNode);
var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode);
var sdiv = jQuery(".ui-jqgrid-sdiv", gviewNode);

later, the structure of the sdiv is like following:

<div class="ui-jqgrid-sdiv">
    <div class="ui-jqgrid-hbox">
        <table class="ui-jqgrid-ftable" >
            <tbody>
                <tr class="ui-widget-content footrow footrow-ltr">
                    <td class="ui-state-default jqgrid-rownum">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>bla bla</td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

So you change CSS properties of the footer with respect of one of the ways:

1. Include in your CSS an element with descriptor like "tr.footrow td" and define all what you need
2. Change class dynamically using the anatomy of jqGrid which I described above.

I recommend you to use the second way only if you unable to use the first one, because you have to find a correct place (probably gridComplete event) to make the changes. If you will try do this on the wrong place, either your changes will not working or you'll have to fix height or width of some jqGrid components (see Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog)

Regards and happy coding!