You can apply this in your style which should be after the ui.jqgrid.css.

overwriting these properties

.ui-jqgrid .ui-jqgrid-title { ... }

.ui-jqgrid .ui-jqgrid-titlebar-close { ...}

in appropriate way

Best Regards

Tony

    I've really been enjoying working with JQgrid, but I've stumbled across a minor issue that I can't seem to resolve. Is there any simple way to alrign the button that toggles the entire grid between expanded or collapsed to the left of the caption text? I could fix the issue by simply setting the margin-left CSS property to a negative value or using the float property, but I'm hoping to find a cleaner method to implement this.

The most effective solution to this would be to change the order in which the <th> element that contains the caption text and the <td> element which contains the button are generated, but I can't seem to figure out how to do this.

Here's the code that i'm using to generate the table:

var $j = jQuery.noConflict();
$j(document).ready(function(){
  var mygrid = $j("#s3list").jqGrid({
    url:'some.url',
    datatype: 'json',
    mtype: 'POST',
    colNames:['ColName1','ColName2', 'ColName3'],
    colModel:[           
      {name:'ColName1', index:"ColName1", width:250, sortable: true, sorttype: "int", search: true},
      {name:'ColName2', index:'ColName2', width:250, sortable: true, sorttype: "date", datefmt: "dd-mm-yyyy", search: true, searchoptions:{dataInit:function(el){$j(el).datepicker({dateFormat:'dd-mm-yy'});} }},
      {name:'ColName3', index:'ColName3', width:250, sortable: true, sorttype: "date", datefmt: "dd-mm-yyyy", search: true, searchoptions:{dataInit:function(el){$j(el).datepicker({dateFormat:'dd-mm-yy'});} }}
    ],
    pager: '#s3pager',
    rowNum:10,
    rowList:[10,20,30,40,50],
    sortname: "ColName1",
    sortorder: "desc",
    altrows: true,
    viewrecords: true,
    height: '100%',
    imgpath: '/jqGrid/themes/basic/images',
    caption: 'Caption Name',
    autowidth: true,
    rownumbers: true,
    gridview : true
  })
  .navGrid('#s3pager',{edit:false,add:false,del:false,search:false,refresh:false, view:false})
  .navButtonAdd("#s3pager",{caption:"Search",title:"Toggle Search Toolbar", buttonimg:"/jqGrid/themes/basic/images/find.gif",
     onClickButton:function(){
       mygrid[0].toggleToolbar()
     }
   })
   .navButtonAdd("#s3pager",{caption:"Clear",title:"Clear Search", buttonimg:"/jqGrid/themes/basic/images/refresh.gif",
      onClickButton:function(){
        mygrid[0].clearToolbar()
      }
   });
   mygrid.filterToolbar();
});

Also, here's the markup for the caption row that's generated. I've added comments next to the elements that I mentioned above:

<div style="width: 764px;" class="GridHeader">
    <table class="Header" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td class="HeaderLeft">
                    <img src="/jqGrid/themes/Sircon/images/spacer.gif" border="0">
                </td>
                <th>Chapters</th>                 // We want to put this element....
                <td class="HeaderButton">     // After this element.
                    <img src="/jqGrid/themes/Sircon/images/up.gif" border="0">
                </td>
                <td class="HeaderRight">
                    <img src="/jqGrid/themes/Sircon/images/spacer.gif" border="0">
                </td>
            </tr>
        </tbody>
    </table>
</div>