One exciting aspect of jqGrid 3.5 is its seamless integration with jQuery UI Themes. To customize the appearance of your grid, you can easily build or choose a theme from this website. Simply include a reference to the selected theme in your webpage:

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

This simple step will instantly enhance the visual appeal of your grid layout without requiring extensive design work.

Does this solution address your needs, or would you like further modifications to elevate the overall look and feel of your grid?

To modify the grid header dynamically, you will need to make changes directly in the HTML.

Below is an example of how you can achieve this:

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 initialization:

    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}
              );

Inspecting the generated HTML 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;">

...

In order to target and modify the grid header, follow these steps:

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

The styling for ".jqgrid-header" should be defined as follows:

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

After testing this approach, it has proven to be effective. Hopefully, this solution will be helpful for your requirements.

Expanding on Justin Ethier's statement...

jqGrid utilizes Jquery-UI themes, so the most effective method to alter the grid's appearance would be to create a personalized theme.

Before attempting to modify the css directly, I highly recommend trying out the theme option to see if it suits your needs... but feel free to customize the css if the jquery-ui look is too restrictive for you.

Yes, it is definitely possible.

There are two approaches you can take:

Firstly, you have the option to modify the CSS of the grid. This method is suitable for making minor design tweaks. However, for major changes, this may not be the best approach as JQGrid's CSS classes are interdependent.

Alternatively, you can strip away all existing styling from the HTML and add your own custom styles.

For example, if you have a JQGrid structured like this:

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 code will produce HTML similar to the following:

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

..

</div>

You can remove all existing CSS classes using:

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

and so on.

Once you have defined your custom classes, you can apply them to the HTML structure with:

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

I recommend utilizing both techniques for optimal customization.

// Function to strip 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");
}

If you want to eliminate all ui-grid classes, try this:

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

Keep in mind that this approach could potentially impact performance for larger grid sizes.

I have revamped the CSS of jQGrid in a unique way to accommodate Bootstrap design seamlessly. To configure this new jQGrid setup, you will need:

1) Font Awesome Style

2) Latest bundle of jQGrid

The newly designed jQGrid will have a modern look as shown in the image below:

https://i.sstatic.net/l3rFl.png

You can find the complete CSS and JavaScript coding for this updated version here.