Exporting Jqgrid into excel is not working in jsp

Question

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>

I hope that you use ` ` statement before `` and you just not posted it. If you don't have ` ` I strictly recommend to include it. See [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid#html_file) and example. — Oleg, Oct 19 '12 at 11:19

score 0 · Answer 1 · edited May 23 '17 at 12:04

I see some design problems in your solution. I will just try to describe what you do:

You have data saved on the server. Probably you save the data in the database.
You fill jqGrid with the data returned from the server per Ajax request.
If the user click on "Export to Excel" button you try to read the data from the cells of the current page of the grid and send the data to the server per HTTP POST. You expect that server (csvExport.jsp) will generate some Excel file and returns the data back to the client.

Could you explain me why you need to send the data from the jqGrid to the server? The server has already all the data and exactly the server get the data already for you. Is it not easier just to send request to the server only with the parameters of the grid ($('#todate').val() and $('#fromdate').val()) and the server will get all the data directly from the database?

By the way you have in your code typing error: var fromdate=$('#todate').val();. You mean probably var fromdate=$('#fromdate').val()?

About the implementation of server side code see here. I am not sure whether it will help you, but in another answer I posted before the code which shows how to use Open XML SDK 2.0 to generate real Excel files (.XLSX files) in the server code.

Exporting Jqgrid into excel is not working in jsp

1 Answers1