Search code examples
jqueryjqgridfree-jqgrid

Applying style to jqgrid

I am using free jqgrid (latest version)

What I saw from the demo was the grid is blue.

I have use this in my application, not sure whats missing but the grid comes out to be gray. I also applied guiStyle: "bootstrap" but that also just changes little appearance and fonts but not color. Also in the search dialog box the controls are aligned to each other like they are all together. See image link below for all.

https://i.sstatic.net/45Ex0.jpg

  1. How can I change the color to default blue
  2. How can I fix the search dialog controls
  3. How can I apply any other custom style formatting to this.

THanks

--------------Updated------------------

 <link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> (bootstrap 4.0.0) 
 <link href="~/lib/free-jqgrid/css/ui.jqgrid.css" rel="stylesheet" /> (4.15.2)
 <link href="~/lib/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet" />
 <link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
 <link href="~/lib/select2/dist/css/select2.min.css" rel="stylesheet" />

 @section scripts{
<script src="~/lib/jquery/dist/jquery.min.js"></script>   
<script src="~/lib/free-jqgrid/dist/modules/grid.base.js"></script>
<script src="~/lib/free-jqgrid/dist/modules/grid.common.js"></script>
<script src="~/lib/free-jqgrid/dist/modules/grid.formedit.js"></script>
<script src="~/lib/free-jqgrid/dist/modules/grid.filter.js"></script>
<script src="~/lib/jquery-ui/jquery-ui.min.js"></script>
<script src="~/lib/select2/dist/js/select2.min.js"></script>
<script src="~/lib/free-jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="~/lib/free-jqgrid/js/jquery.jqgrid.min.js"></script>

I am not applying/using any styling other than above css/js and as have added below:

  guiStyle: "bootstrap",
  iconSet: "fontAwesome",
Solution

  • I'd recommend you to specify more exactly what you do (with the demo) and what you want to have.

    Before answering on your question I want to remark, that you don't really need to use jquery-ui.min.css for jqGrid is you use guiStyle: "bootstrap".

    The CSS settings for Bootstrap 4 and Bootstrap 3 are different. If you use free jqGrid with Bootstrap 4 thenb you have to use guiStyle: "bootstrap4" instead of guiStyle: "bootstrap". See https://jsfiddle.net/ovq05x0c/1/ as an example.

    If you include jquery.jqgrid.min.js then you don't need to include grid.base.js, grid.common.js, grid.formedit.js, grid.filter.js and in any way you need to include i18n/grid.locale-en.js because it's part of jquery.jqgrid.min.js or grid.base.js. The file query-ui.min.js isn't needed too if you don't use jQuery UI yourself.

    The best practice is to load all CSS and JavaScript files from CDN instead of loading there from the local server. Local server could be good for local application only, but not for the side available from Internet. See the article for more information about the usage of free jqGrid from CDN.

    I'd recommend you to read the article as the starting point of using free jqGrid. It provides some examples of customizing the grid. For example, the CSS rule

    .ui-jqgrid.ui-jqgrid-bootstrap {
    border: 1px solid #003380;
}

    changes the color of the border of the outer div of the grid, the CSS rule

     .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption {
    background-color: #e6f0ff;
}

    changes the background color of the caption/title. One more CSS rule

    .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv {
    background-color: #cce0ff;
}

    changes the background color of the column headers. In the same way you can customize any other element of jqGrid. The demo https://jsfiddle.net/OlegKi/90qmjean/7/ is en example of changing some colors and font size in free jqGrid and select2, which you probably use too.