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. Thi

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!