Change Style of Jqgrid

Applying style to jqgrid

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.

free jqGrid: how to change icons and syles layout

I recommend you use Font Awesome 4.7 for icons. You need just include CSS of Font Awesome (from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css, for example) add iconSet: "fontAwesome" option of jqGrid.

One more advice: the next version of Bootstrap don't have old buildin Glyphicons icon font (see here). Bootstrap 4 recommend Font Awesome as one of possible alternatives.

If you need more deep replacing of icons you have to specify which one you need to replace to which one.

UPDATE: I created for you an example of customizing some background colors of free jqGrid, which use Bootstrap, and customizing the font size: https://jsfiddle.net/OlegKi/90qmjean/. The demo uses the following CSS

.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-titlebar .ui-jqgrid-title,
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-errorbar .ui-jqgrid-error,
.ui-jqdialog.ui-jqgrid-bootstrap .ui-jqdialog-titlebar .ui-jqdialog-title {
      font-size: 18px;
}
.ui-jqdialog.ui-jqgrid-bootstrap .FormData .CaptionTD {
      font-size: 16px;
}
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-view,
.ui-jqgrid.ui-jqgrid-bootstrap .ui-pager-control .ui-pg-input,
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-pager,
.ui-jqgrid.ui-jqgrid-bootstrap .ui-pager-control .ui-pg-selbox,
.ui-jqgrid > .ui-jqgrid-view input,
.ui-jqgrid > .ui-jqgrid-view select,
.ui-jqgrid > .ui-jqgrid-view textarea,
.ui-jqgrid > .ui-jqgrid-view button {
      font-size: 14px;
}
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-view .fa,
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-pager .fa,
.jqgrow .ui-pg-div > span.fa {
      font-size: 18px;
}
.ui-jqgrid .ui-jqgrid-htable th {
    padding: 0 .3em 0 .3em;
}
.ui-jqgrid tr.jqgrow > td,
.ui-jqgrid tr.jqgroup > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.jqgfirstrow > td {
    padding: 0 .3em 0 .3em;
}
.ui-jqgrid.ui-jqgrid-bootstrap,
.ui-jqgrid-bootstrap.ui-jqdialog modal-content {
      border: 1px solid #003380;
}
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption,
.ui-jqdialog.ui-jqgrid-bootstrap .ui-jqdialog-titlebar {
    background-color: #0073e6;
    color: white;
}
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv {
    background-color: #99ccff;
}
.ui-jqgrid-bootstrap.ui-jqgrid .ui-jqgrid-toppager,
.ui-jqgrid-bootstrap.ui-jqgrid .ui-jqgrid-pager {
    background-color: #cce6ff;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active, 
.table > thead > tr > th.active,
.ui-pg-table .ui-pg-button.active,
.ui-jqgrid-actions .ui-pg-div.active {
    background-color: #e6f2ff;
}
.ui-pg-table .ui-pg-button.active,
.ui-jqgrid-actions .ui-pg-div.active {
    border-radius: .4em;
}
.ui-jqgrid-btable tr.jqgrow.success,
.ui-jqgrid-btable tr.jqgrow.success > td {
    background-color: #ccffee;
}
.ui-jqgrid-btable tr.jqgrow.active,
.ui-jqgrid-btable tr.jqgrow.active > td
.ui-jqgrid-btable > tbody > tr.jqgrow.active > td:hover,
.ui-jqgrid-btable.table-hover > tbody > tr.jqgrow.active:hover > td,
.ui-jqgrid-btable.table-hover > tbody > tr.jqgrow:hover > .active,
.ui-jqgrid-btable.table-hover > tbody > tr.jqgrow.active:hover > th {
    background-color: #ffffe6;
}
.ui-jqgrid-btable tr.jqgrow.active.success,
.ui-jqgrid-btable tr.jqgrow.active.success > td {
    background-color: #e6e6ff;
}
.ui-jqdialog-titlebar-close.active {
    background-color: #ccffee;
}

I think that you can easy modify the above CSS rules to produce the font size and the colors/background-colors which you need.

How to change font size and other style of jqgrid 4.15

Since no one answered here, I resolved this by using the below code:

.ui-jqgrid tr.jqgroup td {
font-weight: bold;
font-size: 12px;
}

.ui-jqgrid .ui-th-column > div.ui-jqgrid-sortable {
font-size: 15px;
}

span.ui-jqgrid-cell-wrapper {
font-size: 16px;
}

td.jqgrid-rownum {
font-size: 15px;
}

Change CSS of the add form using jqGrid

All CSS styles which uses jqGrid for the add/edit forms you can find here and here. If you would examine the lines and examine the HTML fragment of any jqGrid form you would see all classes used by jqGrid.

I don't understand only what you mean under "to import another css". The "import" would works only if you have somewhere another CSS styles with the same class names and the same hierarchy of the elements (dives, tables, tr and so on elements). So it's possible to change the styles of forms used by jqGrid, but the adjustment of the styles will be not so easy. You have to examine the structure of the jqGrid dialogs (forms) exactly to be able to make the changes.

UPDATED: jqGrid uses jQuery UI styles. So you need just change the jQuery UI to another one and jqGrid will use it.

For example the demo (simple modification of the old demo from the answer) produce the following Edit form:

---

Related Topics