jqGrid 3.5 with jQuery UI ThemeRoller Themes Demos

<!--- Get all the theme directories --->
<cfdirectory action="list" directory="#GetDirectoryFromPath(GetTemplatePath())#css" type="dir"  name="dirContents">
<!--- Either the selected theme is passed in otherwise we set it to the first theme in directory --->
<cfparam name="Form.cssName" default="#dirContents.name#">
<!--- Our Form that displays the selections --->
<cfform action="gridtest1.cfm" id="cssForm" name="cssForm">
<table>
<tr><td>Themes:</td><td>
<cfselect query="dirContents" display="name" value="name" name="cssList" id="cssList" selected="#Form.cssName#">
</cfselect></td></tr>
<tr><td>
Current Theme:</td><td>
<cfinput type="text" id="cssName" name="cssName" value="#Form.cssName#">
</td></tr>
</table>
</cfform>

function load(url_, /*optional*/ media_) 
{
// We are preventing loading a file already loaded
var _links = document.getElementsByTagName("link");
var _head = document.getElementsByTagName("head")[0];                

// Loop through the length of the links
for( i = 0; _links.length > i; i++)
{
    // If the href is already present, remove it
    if (_links[i]["href"] == url_)
    {
        _head.removeChild(_links[i]);
    }
}

// Optional parameters check
var _media = media_ === undefined || media_ === null ? "all" : media_;

// Build link element
var _elstyle = document.createElement("link");
_elstyle.setAttribute("rel", "stylesheet");
_elstyle.setAttribute("type", "text/css");
_elstyle.setAttribute("media", _media);
_elstyle.setAttribute("href", url_);

// Add style
_head.appendChild(_elstyle);
}

<script>
sel = document.cssForm.cssName.value;
$("#cssList").change(function()
{
	var selStyle = $("#cssForm option:selected").val();
	document.cssForm.cssName.value = selStyle;
	document.cssForm.submit();
});
	var loadVar = "css/" + sel + "/jquery-ui-1.7.2.custom.css";
	load(loadVar);
</script>