jQuery Grid Export to Excel

Export Grid data to Excel. The sample illustrates how to export data to Excel using the jqxGrid widget by jQWidgets.

by swesh

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxdata.export.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.export.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.selection.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.pager.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="jqxgrid"></div>
<input style='margin-top: 10px;' type="button" value="Export to Excel" id='excelExport' />
<!-- Unrelated content -->
<br/>
<a style="margin-top: 20px; font-size: 12px; color: #27659a;" title="Donwload your jQWidgets Free Trial" href="http://www.jqwidgets.com/download" target="_blank">Donwload your jQWidgets Free Trial now!</a>

JavaScript

var data = generatedata(100);

var source = {
    localdata: data,
    datatype: "array",
    updaterow: function(rowid, rowdata) {
        // synchronize with the server - send update command   
    }
};

var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$("#jqxgrid").jqxGrid({
    width: 670,
    source: dataAdapter,
    theme: 'energyblue',
    altrows: true,
    pageable: true,
    autoheight: true,
    selectionmode: 'multiplecellsextended',
    columns: [
        {
        text: 'First Name',
        datafield: 'firstname',
        width: 90},
    {
        text: 'Last Name',
        datafield: 'lastname',
        width: 90},
    {
        text: 'Product',
        datafield: 'productname',
        width: 177},
    {
        text: 'Available',
        datafield: 'available',
        width: 67,
        cellsalign: 'center',
        align: 'center'},
    {
        text: 'Ship Date',
        datafield: 'date',
        width: 90,
        align: 'right',
        cellsalign: 'right',
        cellsformat: 'd'},
    {
        text: 'Quantity',
        datafield: 'quantity',
        width: 70,
        align: 'right',
        cellsalign: 'right'},
    {
        text: 'Price',
        datafield: 'price',
        cellsalign: 'right',
        align: 'right',
        cellsformat: 'c2'}
    ]
});

$("#excelExport").jqxButton({
    theme: 'energyblue'
});

$("#excelExport").click(function() {
    $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
});