export to excel in jquery or jqGrid

Question

I have a jqGrid where I get data at once from server (java) in JSON format. I want the data in the jqGrid to be exported into Excel format.

Till now I saw this page which gives me an error in IE 'o.url is null or not an object' grid.import.js

Also I saw this demo where on the tool tip of export button it says Export To Excel but the file saved is in xml format.

So I would like any suggestions that can either transform my JSON string into excel using javascript or jquery plugin or using jqgrid's inbuilt feature.

My jqGrid

My jqGrid Code

grid = jQuery("#list2");
                grid.jqGrid({
                    datastr : comparePatchData,
                    datatype: 'jsonstring',
                    colNames:['Name',starheader, header1, header2],
                    colModel:[
                        {name:'elementName',index:'elementName', width:90},
                        {name:'isPrasentinXml1',index:'isPrasentinXml1', width:100, align:'center', formatter: patchPresent},
                        {name:'isPrasentinXml2',index:'isPrasentinXml2', width:100, align:'center', formatter: patchPresent},
                        {name:'isPrasentinXml3',index:'isPrasentinXml3', width:100, align:'center', formatter: patchPresent}
                    ],
                    pager : '#gridpager2',
                    rowNum:12,
                    scrollOffset:0,
                    height: 320,
                    autowidth:true,
                    viewrecords: true,
                    gridview: true,
                    loadonce:true,
                    jsonReader: {
                        repeatitems: false,
                        page: function() { return 1; },
                        root: "response"
                    },
                    subGrid: true,
                    // define the icons in subgrid
                    subGridOptions: {
                        "plusicon"  : "ui-icon-triangle-1-e",
                        "minusicon" : "ui-icon-triangle-1-s",
                        "openicon"  : "ui-icon-arrowreturn-1-e",
                        //expand all rows on load
                        "expandOnLoad" : false
                    },

                    subGridRowExpanded: function(subgrid_id, row_id) {
                        //console.info(subgrid_id+", "+row_id);
                        var subgrid_table_id, pager_id, iData = -1;
                        subgrid_table_id = subgrid_id+"_t";
                        //pager_id = "p_"+subgrid_table_id;
                        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' style='overflow-y:auto' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");

                        $.each(comparePatchData.response,function(i,item){
                            if(item.id === row_id) {
                                iData = i;
                                return false;
                            }

                        });
                        if (iData == -1) {
                            return; // no data for the subgrid
                        }

                        jQuery("#"+subgrid_table_id).jqGrid({
                            datastr : comparePatchData.response[iData],
                            datatype: 'jsonstring',
                            colNames: ['Name','Value1','Value2','Value3'],
                            colModel: [
                                {name:"name",index:"name",width:90},
                                {name:"firstValue",index:"firstValue",width:100},
                                {name:"secondValue",index:"secondValue",width:100},
                                {name:"thirdValue",index:"thirdValue",width:100}
                            ],
                            rowNum:10,
                            //pager: pager_id,
                            sortname: 'name',
                            sortorder: "asc",
                            height: 'auto',
                            autowidth:true,
                            jsonReader: {
                                repeatitems: false,
                                //page: function() { return 1; },
                                root: "attribute"
                            }
                        });

                        jQuery("#"+subgrid_table_id).jqGrid('navGrid',{edit:false,add:false,del:false});
                    }
                });
                grid.jqGrid('navGrid','#gridpager2',{add:false,edit:false,del:false});
                grid.jqGrid('navButtonAdd','#gridpager2',{
                    caption:"Export to Excel", 
                    onClickButton : function () { 
                        jQuery("#list2").excelExport();
                    } 
                });

Part of my Json

{
"response": [
    {
        "id": "1",
        "elementName": "libgtop2-devel-2.14.4-3.el5",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": false,
        "isPrasentinXml2": false,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "thirdValue": "libgtop2-devel-2.14.4-3.el5"
            }
        ]
    },
    {
        "id": "2",
        "elementName": "ifd-egate-0.05-15",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": false,
        "isPrasentinXml2": false,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "thirdValue": "ifd-egate-0.05-15"
            }
        ]
    },
    {
        "id": "3",
        "elementName": "libXScrnSaver-devel-1.1.0-3.1",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": false,
        "isPrasentinXml2": false,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "thirdValue": "libXScrnSaver-devel-1.1.0-3.1"
            }
        ]
    },
    {
        "id": "4",
        "elementName": "kde-i18n-Chinese-Big5-3.5.4-1",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "kde-i18n-Chinese-Big5-3.5.4-1",
                "secondValue": "kde-i18n-Chinese-Big5-3.5.4-1"
            }
        ]
    },
    {
        "id": "5",
        "elementName": "cpio-2.6-20",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "cpio-2.6-20",
                "secondValue": "cpio-2.6-20",
                "thirdValue": "cpio-2.6-20"
            }
        ]
    },
    {
        "id": "6",
        "elementName": "grep-2.5.1-54.2.el5",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "grep-2.5.1-54.2.el5",
                "secondValue": "grep-2.5.1-54.2.el5",
                "thirdValue": "grep-2.5.1-54.2.el5"
            }
        ]
    },
    {
        "id": "7",
        "elementName": "avahi-compat-libdns_sd-0.6.16-1.el5",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "avahi-compat-libdns_sd-0.6.16-1.el5",
                "secondValue": "avahi-compat-libdns_sd-0.6.16-1.el5",
                "thirdValue": "avahi-compat-libdns_sd-0.6.16-1.el5"
            }
        ]
    },
    {
        "id": "8",
        "elementName": "gpm-devel-1.20.1-74.1",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "gpm-devel-1.20.1-74.1",
                "secondValue": "gpm-devel-1.20.1-74.1",
                "thirdValue": "gpm-devel-1.20.1-74.1"
            }
        ]
    },
    {
        "id": "9",
        "elementName": "esc-1.0.0-39.el5",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": false,
        "isPrasentinXml2": false,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "thirdValue": "esc-1.0.0-39.el5"
            }
        ]
    },
    {
        "id": "10",
        "elementName": "kde-i18n-Spanish-3.5.4-1",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "kde-i18n-Spanish-3.5.4-1",
                "secondValue": "kde-i18n-Spanish-3.5.4-1"
            }
        ]
    }
]
}

Greathouse

Look at here and here for example. – Gyniatrics

Answer 1

You don't have to export a file using the Excel format in order to get the data into Excel. It is generally much easier to export to CSV. CSV files should be associated with Excel by default, so it should have the Excel icon by it and everything. XML would work the same way, I think, but the CSV format is much lighter, and does the same job in this case. Converting JSON to CSV is simple:

var response = JSON.parse(responseJSON).response;
var csv = arrayToCSV(response);

function arrayToCSV(arr) {
    var columnNames = [];
    var rows = [];
    for (var i=0, len=arr.length; i<len; i++) {
        // Each obj represents a row in the table
        var obj = arr[i];
        // row will collect data from obj
        var row = [];
        for (var key in obj) {
            // Don't iterate through prototype stuff
            if (!obj.hasOwnProperty(key)) continue;
            // Collect the column names only once
            if (i === 0) columnNames.push(prepareValueForCSV(key));
            // Collect the data
            row.push(prepareValueForCSV(obj[key]));
        }
        // Push each row to the main collection as csv string
        rows.push(row.join(','));
    }
    // Put the columnNames at the beginning of all the rows
    rows.unshift(columnNames.join(','));
    // Return the csv string
    return rows.join('\n');
}

// This function allows us to have commas, line breaks, and double 
// quotes in our value without breaking CSV format.
function prepareValueForCSV(val) {
    val = '' + val;
    // Escape quotes to avoid ending the value prematurely.
    val = val.replace(/"/g, '""');
    return '"' + val + '"';
}

Damson

What happens after I have csv how do i put it in file? – Greathouse

That isn't possible to do from the client. You would need to make a server-side script to do that. What are you using on the server? – Damson

Ah. Sadly I don't know java well enough to give a quickie answer on how to make the csv into a file. This javascript function should give you the contents of a csv file in string form, which you can then send to your server-side code to make a file from it on the server. – Damson

Late comment, but I don't fully agree with your remark equally valuable. With CSV you have to pay attention to regional settings because of decimal and date formats. With Excel it is possible to work in a type-safe manner. – Manolo

@GertArnold True. Removed "equally valuable" claim above. – Damson

Answer 2

I have a jqGrid where I get data at once from server (java) in JSON format. I want the data in the jqGrid to be exported into Excel format.

Here's a nice article, showing you how to export from jqGrid to Excel...

http://www.codeproject.com/Articles/784342/Export-data-from-jqGrid-into-a-real-Excel-file

Gelding

Answer 3

I solved this like this:

1. Read

https://w3lessons.info/2015/07/13/export-html-table-to-excel-csv-json-pdf-png-using-jquery/#Installation

2. Here is github

https://github.com/kayalshri/tableExport.jquery.plugin

3. Here is a demo

http://demos.w3lessons.info/jquery-table-export#

It works perfectly i tried the Export Excel. In my case i just used the id selector for the jqgrid table.

BTW This will export only visible part so if you 100 pages it need server side because info is just not there !.

Lathing

Answer 4

I'm working with MOSS 2007 to export some lists(say 5 lists) to excel.My requirement is i need more than one lists to be exported to excel.I have added a CEWP in my page with a button so that by one click i can export more than one list datas to excel.nw i get a run time error when i use jquery if( $('#WebPartWPQ3').is(':visible') )--->object expected error. I dont find any div id to trace..so is anybody know the answer,pls be come out of it.. ans related to this issue is really really really appreciated..my code is as follows.


<button type="button"
onclick=exportToExcel();>Click<br>
</button><br>
<script type="text/javascript"><br>
 function exportToExcel() <br>
{ <br>
alert('Hi');<br>
//alert($("#WebPartWPQ3").attr("visibility"));<br>
if( $('#WebPartWPQ3').is(':visible') )<br>
{ <br>
 contentType = "application/vnd.ms-excel";<br>
var oExcel = new ActiveXObject("Excel.Application");<br>
var oBook = oExcel.Workbooks.Add;<br>
var oSheet = oBook.Worksheets(1);<br>

var VESSApplications =document.getElementById<br>('ctl00_m_g_e3f5d791_5651_40ca_a03a_1c511c7f2b28_ctl00_ctl00_toolBarTbl');<br>
  alert(document.getElementById('WebPartWPQ3'));<br>
var OtherApplications =document.getElementById('tblOtherApplications');<br>
 //   var MFGApplications =document.getElementById('tblMFGApplications');<br>
var row=3;<br>
var col=1;<br>

//Define criteria - start<br>
oSheet.Cells(row, col)="Business Function";<br>
oSheet.Cells(row, col+1)="VESS";<br>
oSheet.Cells(row, col+2)=selectedVESSBusinessFunction;<br>
 //  oSheet.Cells(row, col+3)="Manufacturing";<br>
 //  if(selectedMFGBusinessFunction != "-Select-")<br>
 //  oSheet.Cells(row, col+4)=selectedMFGBusinessFunction;<br>
row +=2;<br>

oSheet.Cells(row, col)="Operating System";<br>
oSheet.Cells(row, col+1)="First Choice";<br>
    if(selectedOperatingSystemFirstChoice != "-Select-")<br>

 oSheet.Cells(row, col+2)=selectedOperatingSystemFirstChoice;<br>


oSheet.Cells(row, col+3)="Second Choice";<br>

if(selectedOperatingSystemSecondChoice != "-Select-")<br>

oSheet.Cells(row, col+4)=selectedOperatingSystemSecondChoice;<br>

row +=2;<br>
oSheet.Cells(row, col)="Platform";<br>
oSheet.Cells(row, col+1)="First Choice";<br>
oSheet.Cells(row, col+2)=selectedPlatformFirstChoice;<br>
oSheet.Cells(row, col+3)="Second Choice";<br>

if(selectedPlatformSecondChoice != "-Select-")<br>

oSheet.Cells(row, col+4)=selectedPlatformSecondChoice;<br>
row +=2;<br>
oSheet.Cells(row, col)="Delivery Method";<br>
oSheet.Cells(row, col+1)="First Choice";<br>
oSheet.Cells(row, col+2)=selectedDeliveryFirstChoice;<br>
oSheet.Cells(row, col+3)="Second Choice";<br>

 if(selectedDeliverySecondChoice != "-Select-")<br>

oSheet.Cells(row, col+4)=selectedDeliverySecondChoice;<br>
row +=2;<br>
//alert(VESSApplications.rows.length);<br>
if(VESSApplications.rows.length>0)<br>
{<br>
 for (var y = 0; y < VESSApplications.rows.length; y++) <br>
 {<br>
     for (var x = 0; x < VESSApplications .rows(y).cells.length; x++) <br>
     {<br>
   //          oSheet.Cells(y + 1, x + 1) = VESSApplications .rows(y).cells(x).innerText;<br>
         oSheet.Cells(row, x + 1) = VESSApplications .rows(y).cells(x).innerText;<br>

     }<br>
             row++;<br>

 }<br>
 //   oExcel.Visible = true;<br>
  // oExcel.UserControl = true;<br>
}<br>

else<br>
{<br>
alert("There is no VESS/Other Applications to Export!");<br>
}<br>
row +=2;<br>

//Other Applications<br>

 /*     for (var y = 0; y < OtherApplications.rows.length; y++) <br>
 {<br>
     for (var x = 0; x < OtherApplications.rows(y).cells.length; x++) <br>
     {<br>
         oSheet.Cells(row, x + 1) = OtherApplications.rows(y).cells(x).innerText;<br>

     }<br>
             row++;<br>

 }<br>


   row +=2;<br>


//MFG Applications<br>

 for (var y = 0; y < MFGApplications.rows.length; y++) <br>
 {<br>
     for (var x = 0; x < MFGApplications.rows(y).cells.length; x++) <br>
     {<br>
   //          oSheet.Cells(y + 1, x + 1) = VESSApplications .rows(y).cells(x).innerText;<br>
         oSheet.Cells(row, x + 1) = MFGApplications.rows(y).cells(x).innerText;<br>

     }<br>
             row++;<br>

 }<br>

 */  
oSheet.columns.autofit;<br>


 oExcel.Visible = true;<br>
 oExcel.UserControl = true;<br>
}<br>
else<br>
{<br>
 alert('No VESS/Other applications available to export');<br>
}<br>
}<br>

Economize