I have a jqGrid that works perfectly. It contains a pager button to export the grid to a csv file which works and exports the data. However, I also need to have the column names exported with the data and I can't seem to get that to work. My working code follows.

jQuery("#detail").jqGrid('navGrid','#pager2',

{height:520,width:500,savekey:[true,13],navkeys:[true,38,40],reloadAfterSubmit:false, jqModal:false, closeOnEscape:true, bottominfo:"Fields marked with () are required"}, // edit options {height:520, width:500,savekey:[true,13],reloadAfterSubmit:false,jqModal:false, closeOnEscape:true,bottominfo:"Fields marked with () are required", closeAfterAdd: true}, // add options {reloadAfterSubmit:false,jqModal:false, closeOnEscape:true}, // del options {closeOnEscape:true}, // search options {height:250,width:500,jqModal:false,closeOnEscape:true}, {view:true} // view options );

// add custom button to export the data to excel jQuery("#detail").jqGrid('navButtonAdd','#pager2',{ caption:"", title:"Export to CSV", onClickButton : function () { exportExcel(); }, position:"last" });

// add custom button to print grid jQuery("#detail").jqGrid('navButtonAdd','#pager2',{ caption:"", title:"Print", buttonicon:"ui-icon-print", onClickButton : function () { jQuery('#detail_table').jqprint({ operaSupport: true }); return false; } });

function exportExcel() { var mya=new Array(); mya=jQuery("#detail").getDataIDs(); // Get All IDs var data=jQuery("#detail").getRowData(mya[0]); // Get First row to get the labels var colNames=new Array(); var ii=0; for (var i in data){colNames[ii++]=i;} // capture col names var html=""; for(i=0;i

            }
        html=html+"\\n";  // end of line at the end
        document.forms[0].method='POST';
        document.forms[0].action='ajax/csvExport.php';  // send it to server which will open this contents in excel file
        document.forms[0].target='_blank';
        document.forms[0].csvBuffer.value=html;
        document.forms[0].submit();
    }