column re-ordering is not working while appending thead to jqGrid

Question

I am using column chooser for customizing columns in jqGrid records, but iam appending <thead> to jqGrid for alignment purpose, for this iam unable to reorder my jqGrid columns with columnChooser.

My code is:

if (success==true) {    
    $("#merror").text('');

    $("#list1").jqGrid("GridUnload")
    $("#list1").jqGrid({
        url:"./controllers/apGetTestData.php?testanzres=1&testsuite="+testsuite+
            "&testcase="+testcase+"&ch="+ch+"&fromdate="+fromdate+
            "&todate="+todate+"&mmss="+mmss,
        datatype: 'xml',
        mtype: 'GET',
        height: 'auto',
        colNames:[ 'RRID', 'Release Tag','Completed Date','Result', 'Firm  Ware','DUT','Summary','Remarks'],
        colModel:[
            {name:'idreleaseRequest', index:'idreleaseRequest', width:24},
            {name:'releaseRequestTag', index:'releaseRequestTag'},   
            {name:'DateInfo', index:'Date Info', sortable:false,align:'center'},
            {name:'Result', index:'Result', sortable:false},
            {name:'Firm Ware', index:'Firm Ware', sortable:false},
            {name:'DUT', index:'DUT', sortable:false},              
            {name:'Summary', index:'Summary', sortable:false, align:'left'} ,
            {name:'Remarks', index:'Total Suites', sortable:false}],       
        pager: $('#pager1'),
        rowNum:6,
        rowList:[6,12,18,24],
        sortable:true,
        sortname: 'timeStamp',
        sortorder: "DESC",
        // caption:"Test Results : "+ globalData,
        caption:"Test Results ",
        shrinkToFit:true,
        autowidth: true,
        viewrecords: true,
        rownumbers:true,
        cloneToTop:true, 
        hidedlg: true        
    });
    $("table.ui-jqgrid-htable thead").appendTo("table#list1");
    function  ShowHideColumn () {
        $.extend(true, $.ui.multiselect, {
            locale: {
                addAll: 'Make all visible',
                removeAll: 'Hide All',
                itemsCount: 'Avlialble Columns'
            }
        });
        $.extend(true, $.jgrid.col, {
            width: 450,
            modal: true,
            msel_opts: {dividerLocation: 0.5},
            dialog_opts: {
                minWidth: 470,
                show: 'blind',
                hide: 'explode'
            }
        });
        $("#list1").jqGrid("setColProp", "rn", {hidedlg: false});
        $('#list1').jqGrid('columnChooser');

when i am re-odering columns through column chooser thead names are not reordering but values are reorder, how to solve this problem would anyone help me on this please, thanks

and i am using this js files

  <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery-ui.js"></script>
    <script type="text/javascript" src="../js/popup/popup.js"></script>
    <script type="text/javascript" src="js/viewTestReq.js"></script>   
     <script type="text/javascript" src="../js/jquery.validate/jquery-validate.js"></script>
    <script type="text/javascript" src="../js/jquery.form/jquery.form.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-ui- 1.8.2.custom.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../js/ui.multiselect.js"></script>         
    <script type="text/javascript" src="../js/jqGrid/js/i18n/grid.locale-en.js"></script>        
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

For column Chooser i am using seperate function like this:

    function  ShowHideColumn () {
            $.extend(true, $.ui.multiselect, {
            locale: {
                addAll: 'Make all visible',
                removeAll: 'Hide All',
                itemsCount: 'Avlialble Columns'
            }
        });
        $.extend(true, $.jgrid.col, {
            width: 450,
            modal: true,
            msel_opts: {dividerLocation: 0.5},
            dialog_opts: {
                minWidth: 470,
                show: 'blind',
                hide: 'explode'
            }
        });
      $("#list1").jqGrid("setColProp", "rn", {hidedlg: false});
     $('#list1').jqGrid('columnChooser');


 }

Answer 1

You included multiple times jQuery and jQuery UI and even in different versions. It's wrong! See

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

and

<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript" language="javascript" 
        src="http://code.jquery.com/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

One should include every JavaScript library only ones!!!

Additionally I don't recommend you to use old 4.3.1 version of jqGrid and include copy of jqGrid from my web site (http://www.ok-soft-gmbh.com/jqGrid). There are some public CDN (Content Delivery Network) with jqGrid. For example cdnjs (see here) or jsdelivr (see here):

<link rel="stylesheet" type="text/css"
      href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<script type="text/javascript" 
        src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript"
        src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>

UPDATED The jsfiddle demo which you posted contains a lot of unneeded CSS rules which is origin of the problem with wrong alignment of the columns. The fixed demo http://jsfiddle.net/OlegKi/y2yfuvjy/2/ don't have the problem.

UPDATED 2: One can't just set table-layout:auto for all internal tables of jqGrid. It will break internal structure of jqGrid. If you need to set the width of columns based on the width of content on cells in the column or column header then you can follow the demo which I created for the answer. See http://jsfiddle.net/OlegKi/y2yfuvjy/7/.