How to change the theme of the jqGrid?

Question

I'm looking for the way to change jqGrid theme for the current version. I've started to use jqGrid in my ASP.Net MVC 2 application recently and download some demo solution/projects. I tried to change the theme of the grid by changing the theme ui javascript but it doesn't work for me. Looking at the document doesn't help me much!

How are you changing the jqGrid's theme? I'm looking for:

1. List of css files that used to set up the ui of the grid.
2. Steps to change a theme to a new theme
3. Prefer to refer to the theme by online .css/.js url - so as to update the theme to latest version automatically

Solution 1

jQuery user interface ThemeRoller provides 24 themes.

1. For changing jqgrid theme simply download Redmond(Scroll down and select theme click Download button) theme by selecting Gallery tab then click on Calendar image for preview the theme then click on Download button for downloading.
2. Extract the downloaded file jquery-ui-1.10.4.custom and paste it under themes -> redmond folder.

Below are the files to apply theme in jqgrid.

Example:

<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/themes/redmond/jquery-ui-1.10.4.custom/css/redmond/jquery-ui-1.10.4.custom.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/themes/redmond/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js" ></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/themes/redmond/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>

Change jqgrid theme use jquery-ui-1.10.4.custom.css, jquery-1.10.2.js, jquery-ui-1.10.4.custom.js files.

Step: 1

Step: 2

Solution 2

Not for jQueryUI themes, but you can switch between jQueryUI and bootstrap variants. I'm using free jqGrid (a branch of trirand jqGrid), and you can tune the look-and-feel with two main options:

1. guiStyles (https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L600): jQueryUI, bootstrap, bootstrapPrimary, bootstrap4
2. icons : (https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L389): jQueryUI, fontAwesome, glyph