Home Ask Login Register

Developers Planet

Your answer is one click away!

john doe February 2016

Change styling of jqgrid

I have started using jqgrid for my project and am pretty happy with it.

Screenshot of data in jqgrid

I have two small style related questions.

  • I am using grouping for columns but the column name with '+' is not displayed properly.'+' is half hidden.How can I rectify this?
  • I want to use blue theme. I downloaded the files from here and included ui.jqgrid.min.css in my code but that does not seem to work.What could be the problem?


Oleg February 2016

I'm not sure about the reason of the problems which you described. Free jqGrid with Bootstrap GUI stile without jQuery UI CSS is not yet final, but GitHub contains already version, which it relatively close to release. I created the demo which uses guiStyle: "bootstrap". The current restriction of guiStyle: "bootstrap" is the usage of iconSet: "fontAwesome" additionally.

To customize the color of jqGrid CSS one need just specify border color or background color. For example I used the following CSS rules in the demo:

.ui-jqgrid.ui-jqgrid-bootstrap {
    border: 1px solid #003380;
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv {
    background-color: #cce0ff;
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-toppager,
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-pager {
    background-color: #e6f0ff;

The results are like on the picture below:

enter image description here

Post Status

Asked in February 2016
Viewed 2,681 times
Voted 13
Answered 1 times


Leave an answer

Quote of the day: live life