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?



Answers
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?



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

By : MosLeBrut


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.

By : r00fus


This video can help you solving your question :)
By: admin