jQuery Grid Plugin - jqGrid

hi Tony,

this is just a great plugin..

i have three problems with jqGrid and it seems i can't solve them out.

• i can't have more than 16 columns in jqGrid.. and i don't know why
  I think its a bug or something.. please check this (http://www.trirand.com/blog/?p.....omment-590)
• i've tried and tried to show and hide the columns but it was useless.
  i need some help. can you tell me what is wrong with the following code?
• the same thing with the datepicker.. i couldn't make it work.. please if you don't mind just tell me how to make this column "issueDate" works with "datepicker"?

here is my code (php):

.....
echo <<<EOF

<script type="text/javascript">
    jqGridInclude("$JS/grid/");
    jQuery(document).ready(function(){
        jQuery("#Table").jqGrid({
            url:'?Option=show',
            datatype: "json",
            mtype: 'POST',
            colNames:['ID', '$ArName', '$EnName', '$Sex', '$FileNo', '$RefNo', '$Salary', '$Contract', '$PassNo', '$ArIssuePlace', '$EnIssuePlace', '$IssueDate', '$ExpireDate', '$Nationality', '$Religion', '$Occupation'],
            colModel:[
                {name:'ID',index:'ID', width:50,editable:false,editoptions:{readonly:true,size:10}},
                {name:'arName',index:'arName', width:155,editable:true,editoptions:{size:36}},
                {name:'enName',index:'enName', width:155,editable:true,editoptions:{size:36}},
                {name:'Sex',index:'Sex', width:90, editable: true,edittype:"select",editoptions:{value:"ID:Value;ID:Value"}},
                {name:'fileNo',index:'fileNo', width:100,editable:true,editoptions:{size:36}},
                {name:'refNo',index:'refNo', width:100,editable:true,editoptions:{size:36}},
                {name:'Salary',index:'Salary', width:80,editable:true,editoptions:{size:36}},
                {name:'Contract',index:'Contract', width:85,editable:true,editoptions:{size:36}},
                {name:'passportNo',index:'passportNo', width:110,editable:true,editoptions:{size:36}},
                {name:'arIssuePlace',index:'arIssuePlace', width:180,editable:true,editoptions:{size:36}},
                {name:'enIssuePlace',index:'enIssuePlace', width:180,editable:true,editoptions:{size:36}},
                {name:'issueDate',index:'issueDate', width:120,editable:true,editoptions:{size:36},sorttype:"date"},
                {name:'issueExpiry',index:'issueExpiry', width:120,editable:true,editoptions:{size:36},sorttype:"date"},
                {name:'Nationality',index:'Nationality', width:110, editable: true,edittype:"select",editoptions:{value:"ID:Value;ID:Value"}},
                {name:'Religion',index:'Religion', width:110, editable: true,edittype:"select",editoptions:{value:"ID:Value;ID:Value"}},
                {name:'Occupation',index:'Occupation', width:110, editable: true,edittype:"select",editoptions:{value:"ID:Value;ID:Value"}}
            ],
            rowNum:10,
            rowList:[10,25,50,75,100],
            pager: jQuery('#Bar'),
            imgpath: '$JS/grid/themes/basic/images',
            sortname: 'ID',
            viewrecords: true,
            sortorder: "desc",
            recordtext: "$Rows",
            caption:"$Caption",
            editurl:"?Option=modify",
            multiselect:true,
            loadui:'block',
            loadtext: "$LoadMsg",
            height:'100%'
        }).navGrid('#Bar',
            {}, //options
            {height:410,width:400,reloadAfterSubmit:false}, // edit options
            {height:400,reloadAfterSubmit:true}, // add options
            {reloadAfterSubmit:false}, // del options
            {} // search options
        );
    });
   
    jQuery("#HideID").click( function() {
        jQuery("#Table").hideCol(["ID"]);
    });
    jQuery("#ShowID").click( function() {
        jQuery("#Table").showCol(["ID"]);
    });
</script>

<a href="javascript:void(0)" id="HideID">Hide column ID</a><br/>
<a href="javascript:void(0)" id="ShowID">Show column ID</a>

EOF;
.....

Thanks a lot Tony..
Best regards.