jqGrid 3.5 was released yesterday. It includes lots of good features, including a new rendering engine for faster loading. It also now supports jQuery UI ThemeRoller themes, so to start off itself you have access to variety of styles and can create your own easily too.

So I went ahead and created a demo that shows the grid in all these themes.
View Demo

How I did this style selection switch, follows

The creation of grid hasn't changed and all that script remains the same, I have blogged about it before. The main thing to look at here is using ColdFusion with jQuery to implement the style switching. There are probably others (and maybe better) ways to do this, but here I describe how I came about doing it.

The first thing to do was to make it scaleable, that means I don't have to know the names of the themes and don't have to change any code if a theme based on ThemeRoller is added in the future. We use good old cfdirectory for that and read all the ThemeRoller theme subdirectories from the css directory within our path. Then I build the form using cfselect and cfinput.

view plain print about
1<!--- Get all the theme directories --->
2<cfdirectory action="list" directory="#GetDirectoryFromPath(GetTemplatePath())#css" type="dir" name="dirContents">
3<!--- Either the selected theme is passed in otherwise we set it to the first theme in directory --->
4<cfparam name="Form.cssName" default="#dirContents.name#">
5<!--- Our Form that displays the selections --->
6<cfform action="gridtest1.cfm" id="cssForm" name="cssForm">
7<table>
8<tr><td>Themes:</td><td>
9<cfselect query="dirContents" display="name" value="name" name="cssList" id="cssList" selected="#Form.cssName#">
10</cfselect></td></tr>
11<tr><td>
12Current Theme:</td><td>
13<cfinput type="text" id="cssName" name="cssName" value="#Form.cssName#">
14</td></tr>
15</table>
16</cfform>

The form field csBane will be used to read the selected theme and load it. For that we have a short javascript function that loads a css file. I found this function on the net.

view plain print about
1function load(url_, /*optional*/ media_)
2{
3// We are preventing loading a file already loaded
4var _links = document.getElementsByTagName("link");
5var _head = document.getElementsByTagName("head")[0];
6
7// Loop through the length of the links
8for( i = 0; _links.length > i; i++)
9{
10 // If the href is already present, remove it
11 if (_links[i]["href"] == url_)
12 {
13 _head.removeChild(_links[i]);
14 }
15}
16
17// Optional parameters check
18var _media = media_ === undefined || media_ === null ? "all" : media_;
19
20// Build link element
21var _elstyle = document.createElement("link");
22_elstyle.setAttribute("rel", "stylesheet");
23_elstyle.setAttribute("type", "text/css");
24_elstyle.setAttribute("media", _media);
25_elstyle.setAttribute("href", url_);
26
27// Add style
28_head.appendChild(_elstyle);
29}

Next we need a little bit of script in our main file to read the selected stylesheet and load it and also to submit our form when the style selection is changed.

view plain print about
1<script>
2sel = document.cssForm.cssName.value;
3$("#cssList").change(function()
4{
5    var selStyle = $("#cssForm option:selected").val();
6    document.cssForm.cssName.value = selStyle;
7    document.cssForm.submit();
8});
9    var loadVar = "css/" + sel + "/jquery-ui-1.7.2.custom.css";
10    load(loadVar);
11</script>

So here we read the selected theme and load it. We also bind the change function to our cfselect and set the cssName value to the selected option and submit the form.
Update: Demo is back Online.