How to change the theme of the jqGrid?
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/p开发者_运维技巧rojects. 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:
- List of css files that used to set up the ui of the grid.
- Steps to change a theme to a new theme
- Prefer to refer to the theme by online .css/.js url - so as to update the theme to latest version automatically
jQuery user interface ThemeRoller provides 24 themes.
- For changing
jqgrid
theme simply download Redmond(Scroll down and select theme click Download button) theme by selectingGallery
tab then click on Calendar image forpreview the theme
then click onDownload
button for downloading. - Extract the downloaded file
jquery-ui-1.10.4.custom
and paste it underthemes -> 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
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:
guiStyles
(https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L600):jQueryUI
,bootstrap
,bootstrapPrimary
,bootstrap4
icons
: (https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L389):jQueryUI
,fontAwesome
,glyph
精彩评论