Hello Guys!! I have a jqgrid which displays the records .Now as per my requirement i have to export it into excel format .i am trying to do it but its not happening any how.Export to excel button is not working.Here i am posting my code...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQgrid</title>
<img src="images/header.png" alt="Logo" height="130" width="1270"/>
<hr noshade size="3" align="left">
<script language="javaScript"
type="text/javascript" src="calender.js"></script>
<link href="calender.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="plugins/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="plugins/ui.multiselect.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//var windowWidth = (document.documentElement.clientWidth - 100) /0.9;
var i=1;
$('#go').click(function(evt){
//alert('hi');
evt.preventDefault();
var todate=$('#todate').val();
var fromdate=$('#todate').val();
if(todate && fromdate)
{
var URL='getGriddahico.jsp?todate='+$('#todate').val()+'&fromdate='+$('#fromdate').val();
//jQuery("#gridUsuarios").jqGrid('reload');
if(i==1){gridcall(URL);}
else{jQuery("#gridUsuarios").jqGrid('GridUnload');gridcall(URL);}
i++;
}
});
});
function gridcall(path)
{
jQuery("#gridUsuarios").jqGrid({
url:path,
datatype: "json",
colNames:['ID','Call Date','src','dst','dstchannel','Lastapp','Duration','Disposition','Amaflags','cdrcost'],
colModel:[
{name:'id',index:'id', width:90,align: 'center',editable:true, hidden:true,closed:true},
{name:'calldate',index:'calldate',editable:false, width:170,align: 'center'},
{name:'src',index:'src',editable:false, width:170,align: 'center'},
{name:'dst',index:'dst',editable:false, width:170,align: 'center'},
{name:'dstchannel',index:'dstchannel',editable:false, width:170,align: 'center'},
{name:'Lastapp',index:'lastapp',editable:false, width:170,align: 'center'},
{name:'duration',index:'duration',editable:false, width:170,align: 'center'},
{name:'disposition',index:'disposition',editable:false, width:170,align: 'center'},
{name:'amaflags',index:'amaflags',editable:false, width:170,align: 'center'},
{name:'cdrcost',index:'cdrcost',editable:false, width:170,align: 'center'},
],
rowNum:50,
rowList:[50,100,150],
scrollrows : true,
// multiselect: true,
pager: '#pagGrid',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
autowidth:true,
//width: windowWidth,
height:360,
editurl:'edit.jsp'
});
$("#gridUsuarios").jqGrid('navGrid', '#pagGrid',{excel:true})
.navButtonAdd('#pagGrid',{
caption:"Export to Excel",
buttonicon:"ui-icon-save",
onClickButton: function(){
exportExcel();
},
position:"last"
});
function exportExcel()
{
var mya=new Array();
mya=$("#gridUsuarios").getDataIDs(); // Get All IDs
var data=$("#gridUsuarios").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<mya.length;i++)
{
data=$("#gridUsuarios").getRowData(mya[i]); // get each row
for(j=0;j<colNames.length;j++)
{
html=html+data[colNames[j]]+"\t"; // output each column as tab delimited
}
html=html+"\n"; // output each row with end of line
}
html=html+"\n"; // end of line at the end
document.forms[0].csvBuffer.value=html;
document.forms[0].method='POST';
document.forms[0].action='csvExport.jsp'; // send it to server which will open this contents in excel file
document.forms[0].target='_blank';
document.forms[0].submit();
}
jQuery("#gridUsuarios").jqGrid('bindKeys', {"onEnter":function( rowid ) { alert("You enter a row with id:"+rowid)} } );
}
</script>
