Change style of jqGrid

Question

I am using jqGrid 3.5. Can I change the style and look of the grid and make it more beautiful using jQuery or custom CSS or something else?

Answer 1

I'm sure you can.

You have two options:

You can modify the CSS of the grid. This is useful if have to make small modification on the design. The major modifications shouldn't be done this way because the JQGrid's CSS classes are really dependent on each other.

Or you can remove all the styling from the HTML and replace it with your own.

For instance you have a JQGrid like:

HTML

<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager2" class="scroll" style="text-align:center;"></div>

jQuery

jQuery("#list2").jqGrid({ url:'server.php?q=2', 
 datatype: "json", 
 colNames:['Inv No','Date'],
 colModel:[ {name:'id',index:'id', width:55},{name:'invdate',index:'invdate',width:90}],
 rowNum:10, 
 rowList:[10,20,30],
 pager: jQuery('#pager2'), 
 sortname: 'id', 
 viewrecords: true, 
 caption:"JSON Example" }).navGrid('#pager2',{edit:false,add:false,del:false}); 

This will generate HTML like below:

<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">

..

</div>

Remove all the CSS classes:

JQuery("#list2").removeClass(".ui-jqgrid-titlebar");

etc.

After you created your own classes you can add to the HTML structure with:

JQuery("#list2").addClass(".YourClass");

I suggest to use both techniques.

Answer 2

I have modified css of jQGrid in a new way, that will support bootastrap design also. You need following things to configure this jQGrid

1) Font Awesome Style

2) jQGrid Latest bundle

New designed jQGrid will look like below image

New full CSS and full javascripts coding is included http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html here.

Answer 3

You would need to change the grid header (on-the-fly).

This is my code

The HTML:

<table id="jqgrid_ctrs" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="jqgrid_ctrs_pager" class="scroll" style="text-align:center;"></div>

The jqGrid:

    jQuery("#jqgrid_ctrs").jqGrid({
        url:'php-modules/controllers_data.php?ctrtype=LED',
        datatype: "json",
        width:500,
        height:"auto",
        colNames:['CtrName','Type', 'Description', 'Location'],
        colModel:[
           {name:'CtrName',index:'CTRNAME', width:70, editable:false},
           {name:'Type',index:'CTRTYPE', width:70, editable:false},
           {name:'Description',index:'CTRDESCR', width:250, editable:false},
           {name:'Location',index:'CTRLOCATION', width:70, editable:false}
        ],
        rowNum:10,
        rowList:[10,20,30],
        pager: jQuery('#jqgrid_ctrs_pager'),
        sortname: 'CtrName',
        viewrecords: true,
        sortorder: 'desc',
        caption:'System Controllers',

    }).navGrid('#jqgrid_ctrs_pager',
                {search:true,edit:false,add:false,del:false}
              );

In order to understand which object I have to work in, let's inspect the HTML code generated by the JavaScript code:

<div id="gview_jqgrid_ctrs" class="ui-jqgrid-view" style="width: 760px;">
    <div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"></div>
    <div class="ui-state-default ui-jqgrid-hdiv" style="width: 760px;">

...

Now, the only div with an ID specified is the <div id="gview_jqgrid_ctrs"...

That's why the following DOESN'T WORK.

jQuery("#jqgrid_ctrs").removeClass('.ui-widget-header');
jQuery("#jqgrid_ctrs").addClass('.jqgrid-header');

I had to select the parent div and "search into" the header div, having the "ui-jqgrid-titlebar" class specified. Then I removed the original "ui-widget-header" class and replace with my own class.

$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").removeClass('ui-widget-header');
$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").addClass('jqgrid-header');

Where .jqgrid-header is a style defined in this way.

.jqgrid-header { 
    background:#FF9C00 url(images/new_header_bck.png) repeat-x scroll 50% 50%;
    border:1px solid #4297D7;
    color:#FF0000;
    font-weight:bold;
  }

I've tested this and works. Hope this will be useful...

Answer 4

You can remove all ui-grid classes:

$("[class^='ui-jqgrid']").removeAttr('class');

This may have performance issues if your grid size is big.

Answer 5

To elaborate on what Justin Ethier says...

Since jqGrid uses Jquery-UI themes, the best way to change the appearance of the grid would be to make a custom theme.

I would strongly recommend that you see if that works for you before attempt to modify the css after the fact... although you can do that as well, if the jquery-ui theme look is too confining for you.

Answer 6

One of the big features of jqGrid 3.5 is integration with jQuery UI Themes. You can build and/or select a theme from here. Then just add a reference to it in your page:

<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.7.2.custom.css"/>

This will get you a grid that looks very good, with a minimum of effort.

Does that solve your problem or do you need to overhaul the grid look-and-feel even more?