jQuery Grid Plugin - jqGrid

I folks,

I just hacked-in ThemeRoller support for my jqGrids.  So I thought I would share this hoping it might help others.

Warning: the jqGrids I am developing right now have no footers.  IOW, I hide the whole area that says “Page 1 of NN” at the bottom.  So implementing that is up to you and the code below is a good starter.  The code below only applies to the grid title.  If I decide to hack column headers, I will add to this but, right now, I do not have the need to theme column headers.  Looks fine to me…

I am using the latest jQuery-UI 1.6R6 which will soon ship as jQuery-UI 1.7 and require jQuery 1.31 at minimum.

My current pages include the ThemeRoller switching tool and this seems to work fine on my themed jqGrids.

// As usual
$(”#MyTable”).jqGrid(…);

// theme support
$(”#MyTable”).addClass(”ui-widget”);
$(”table.Header th, .HeaderRight, .HeaderLeft”).css(”background-image”,”url()”).addClass(”ui-widget-header”).addClass(”ui-state-default”);

// This side-border suppression is necessary since the jqGrid title area is a composite and the jQuery UI themes place borders that do not look so good in this partucular context.
$(”td.HeaderRight”).css(”border-left”,”0px”);
$(”td.HeaderLeft”).css(”border-right”,”0px”);
$(”table.Header th”).css({borderLeft:”0px”, borderRight:”0px”});

I am pretty happy with the result on my limited and simple jqGrids and I hope this gets you started if you need ThemeRoller support for your jqGrids.

**–**  Steve