How to enable jQgrid to Export data into PDF/Excel

Question

I am new in jQuery/jQgrid coding. I am using jQgrid version is 4.4.4 & jQuery 1.8.3. I want to enable export to PDF/EXCEL functionality in my jQgrid. For that I referred following links - Click Here and Click Here. On the basis of this links, I developed few lines of code in jquery which is as follows:

   .jqGrid('navGrid', topPagerSelector, { edit: false, add: false, del: false, search: false, pdf: true}, {}, {}, {}, {}
   }).jqGrid('navButtonAdd',topPagerSelector,{
    id:'ExportToPDF',
    caption:'',
    title:'Export To Pdf',
    onClickButton : function(e)
    {
        try {
            $("#tbPOIL").jqGrid('excelExport', { tag: 'pdf', url: sRelativePath + '/rpt/poil.aspx' });
        } catch (e) {
            window.location = sRelativePath + '/rpt/poil.aspx&oper=pdf';
        }
    },
    buttonicon: 'ui-icon-print'
});

But this code is not working properly. I searched on internet google a lot but I am not getting useful & relevant info to achieve my task. Is anyone know how to do this???

UPDATE: I a am not using paid version of jqgrid.

Answer 1

Here is a clever solution to save the jqGrid data as excel sheet: (You just need to call this function with GridID and an optional Filename)

var createExcelFromGrid = function(gridID,filename) {
    var grid = $('#' + gridID);
    var rowIDList = grid.getDataIDs();
    var row = grid.getRowData(rowIDList[0]); 
    var colNames = [];
    var i = 0;
    for(var cName in row) {
        colNames[i++] = cName; // Capture Column Names
    }
    var html = "";
    for(var j=0;j<rowIDList.length;j++) {
        row = grid.getRowData(rowIDList[j]); // Get Each Row
        for(var i = 0 ; i<colNames.length ; i++ ) {
            html += row[colNames[i]] + ';'; // Create a CSV delimited with ;
        }
        html += '\n';
    }
    html += '\n';

    var a         = document.createElement('a');
    a.id = 'ExcelDL';
    a.href        = 'data:application/vnd.ms-excel,' + html;
    a.download    = filename ? filename + ".xls" : 'DataList.xls';
    document.body.appendChild(a);
    a.click(); // Downloads the excel document
    document.getElementById('ExcelDL').remove();
}

We first create a CSV string delimited with ;. Then an anchor tag is created with certain attributes. Finally click is called on a to download the file.

Answer 2

    if (exportexcel.Equals(excel) )
   {
        GridView view = new GridView();
        string conn = @"Server=localhost;port=3306;Database=jtext;Uid=root;Password=techsoft";
        IFormatProvider culture = new System.Globalization.CultureInfo("fr-Fr", true);
        MySqlConnection con = new MySqlConnection(conn);
        con.Open();
        MySqlCommand cmd = new MySqlCommand(query, con);
        MySqlDataAdapter adp = new MySqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        adp.Fill(ds);
        view.DataSource = ds;
        view.DataBind();
        con.Close();
        HttpContext Context = HttpContext.Current;
        context.Response.Write(Environment.NewLine);
        context.Response.Write(Environment.NewLine);
        context.Response.Write(Environment.NewLine);
        DateTime ss = DateTime.Now;
        string custom = ss.ToString("dd-MM-yyyy");
        string sss = DateTime.Now.ToString("HH:mm:ss", System.Globalization.DateTimeFormatInfo.InvariantInfo);
        string aaa = "Generated Date and Time : " + custom + "  " + sss;
        context.Response.Write(aaa);
        context.Response.Write(Environment.NewLine);
        foreach (DataColumn column in ds.Tables[0].Columns)
        {
            context.Response.Write(column.ColumnName + " ,");
        }
        context.Response.Write(Environment.NewLine);
        foreach (DataRow row in ds.Tables[0].Rows)
        {
            for (int i = 0; i < ds.Tables[0].Columns.Count; i++)
            {
                context.Response.Write(row[i].ToString().Replace(" ", string.Empty).Replace(",", " ") + " ,");
             }
            context.Response.Write(Environment.NewLine);
        }
        string attachment = "attachment; filename= " + rolefullname + ".xls";
        context.Response.ContentType = "application/csv";
        context.Response.AppendHeader("Content-Disposition", attachment);
         }
       }

strong text

Answer 3

function to be called inside of your onclick event.

function exportGrid(){
  mya = $("#" + table).getDataIDs(); // Get All IDs
var data = $("#" + table).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 = "<html><head>"
        + "<style script=&quot;css/text&quot;>"
        + "table.tableList_1 th {border:1px solid black; text-align:center; "
        + "vertical-align: middle; padding:5px;}"
        + "table.tableList_1 td {border:1px solid black; text-align: left; vertical-align: top; padding:5px;}"
        + "</style>"
        + "</head>"
        + "<body style=&quot;page:land;&quot;>";


for ( var k = 0; k < colNames.length; k++) {
    html = html + "<th>" + colNames[k] + "</th>";
}
html = html + "</tr>"; // Output header with end of line
for (i = 0; i < mya.length; i++) {
    html = html + "<tr>";
    data = $("#" + table).getRowData(mya[i]); // get each row
    for ( var j = 0; j < colNames.length; j++) {
     html = html + "<td>" + data[colNames[j]] + "</td>"; // output each Row as
                // tab delimited
    }
    html = html + "</tr>"; // output each row with end of line
}
html = html + "</table></body></html>"; // end of line at the end
alert(html);
html = html.replace(/'/g, '&apos;');
//  var form = "<form name='pdfexportform' action='generategrid' method='post'>";
//  form = form + "<input type='hidden' name='pdfBuffer' value='" + html + "'>";
//  form = form + "</form><script>document.pdfexportform.submit();</sc"
//      + "ript>";
//  OpenWindow = window.open('', '');
//  OpenWindow.document.write(form);
//  OpenWindow.document.close();
}

Answer 4

If you are on PHP, try phpGrid. Then you just need to call

$dg->enable_export('PDF'); // for excel: $dg->enable_export('EXCEL'); 

check out http://phpgrid.com/example/export-datagrid-to-excel-or-html. It generates jqGrid javascript required for rendering grid.