Change style of jqGrid

Asked 12/9, 2009 at 16:5 Answered 2/5, 2017 at 11:4

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?

Heterochromous answered 12/9, 2009 at 16:5 Comment(0)

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?

Dialogize answered 15/9, 2009 at 21:26 Comment(4)

yeah this a very cool tool ,but it has certain limitations,you cant resolve any styling problem from there. – Stickweed 16/9, 2009 at 12:3

Agreed, but it is much nicer than what you get out-of-the-box with jqGrid. From there it depends on your needs whether jQuery themes are good enough or if you have to roll your own CSS. – Dialogize 16/9, 2009 at 13:20

What if I want to change the css of the add form of the JQGrid when I press add or update button ? – Baronet 13/8, 2012 at 5:27

I might ask a question: #11929474 – Dialogize 13/8, 2012 at 13:29

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...

Slay answered 10/2, 2010 at 17:3 Comment(2)

What if I want to change the css of the add form of the JQGrid when I press add or update button ? – Baronet 13/8, 2012 at 5:28

Just for the sake of optimization, this could be done in a single selector: $("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").toggleClass("ui-widget-header jqgrid-header"); – Namhoi 18/3, 2013 at 21:44

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.

Stickweed answered 12/9, 2009 at 16:53 Comment(1)

What if I want to change the css of the add form of the JQGrid when I press add or update button ? – Baronet 13/8, 2012 at 5:28

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.

Cinchona answered 21/9, 2009 at 19:27 Comment(1)

What if I want to change the css of the add form of the JQGrid when I press add or update button ? – Baronet 13/8, 2012 at 5:32

/* Remove jquery-ui styles from jqgrid */
function removeJqgridUiStyles(){
    $(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
    $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
    $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
    $(".ui-jqgrid-pager").removeClass("ui-state-default");
}

Poe answered 5/3, 2012 at 22:38 Comment(0)

You can remove all ui-grid classes:

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

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

Annabelle answered 1/1, 2014 at 15:55 Comment(0)

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.

Transformism answered 2/5, 2017 at 11:4 Comment(0)

Recommended topics

Hot tags