jQWidgets Forums

Tagged: grid, javascript grid, jquery grid, jqwidgets grid

This topic contains 2 replies, has 2 voices, and was last updated by NickNick 9 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Can not export date to Excel if column is empty Posts

May 27, 2016 at 10:04 am Can not export date to Excel if column is empty #84694

NickNick

Participant

Hi,

grid cell configuration:

align: "center"
cellsformat: "MM/dd/yyyy"
field: "created_at"
filterType: "range"
filterable: true
groupable: true
hidden: false
pinned: false
sortable: true
text: "Created at"
type: "date"

If one cell is empty i get exception trying export to Excel:
Uncaught TypeError: Cannot read property ‘toString’ of undefined
Stack:

i.extend.formatdatejqxdata.export.js:7 
formatDatajqxdata.export.js:7 
gjqxdata.export.js:7 
appendBodyCelljqxdata.export.js:7 
ejqxdata.export.js:7 
kjqxdata.export.js:7 
djqxdata.export.js:7 
exportTojqxdata.export.js:7 
exportToFilejqxgrid.export.js:7 
a.extend.exportdatajqxcore.js:7 
a.jqx.invokejqxcore.js:7 
a.jqx.jqxWidgetProxy

P.S. can not use https://www.jqwidgets.com/jseditor

Just copy and past code from
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsformatting.htm?search=

And got on run:
Error: Uncaught SyntaxError: Unexpected token <
Error: Uncaught SyntaxError: Unexpected token <
Error: Uncaught TypeError: undefined is not a function

May 27, 2016 at 10:12 am Can not export date to Excel if column is empty #84695

Peter Stoev

Keymaster

This example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>With jqxGrid, you can export your data to Excel, XML, CSV, TSV, JSON, PDF and HTML.</title>
	<meta name="description" content="jQuery Grid Data Export to Excel, PDF, XML, CSV, TSV, JSON and HTML" /> 	
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(100);
            data[0].date = null;
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]                     
            };
           
            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,                
                altrows: true,
                sortable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 130 },
                  { text: 'Last Name', datafield: 'lastname', width: 130 },
                  { text: 'Product', datafield: 'productname', width: 200 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 120, 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();
            $("#xmlExport").jqxButton();
            $("#csvExport").jqxButton();
            $("#tsvExport").jqxButton();
            $("#htmlExport").jqxButton();
            $("#jsonExport").jqxButton();
            $("#pdfExport").jqxButton();

            $("#excelExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');           
            });
            $("#xmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');
            });
            $("#csvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');
            });
            $("#tsvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid');
            });
            $("#htmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');
            });
            $("#jsonExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');
            });
            $("#pdfExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'pdf', 'jqxGrid');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
        <div style='margin-top: 20px;'>
            <div style='float: left;'>
                <input type="button" value="Export to Excel" id='excelExport' />
                <br /><br />
                <input type="button" value="Export to XML" id='xmlExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to CSV" id='csvExport' />
                <br /><br />
                <input type="button" value="Export to TSV" id='tsvExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to HTML" id='htmlExport' />
                <br /><br />
                <input type="button" value="Export to JSON" id='jsonExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to PDF" id='pdfExport' />
            </div>
        </div>
    </div>
</body>
</html>

is running fine with the current version. It exports the Grid data to excel even if there is null date.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 27, 2016 at 2:13 pm Can not export date to Excel if column is empty #84703

NickNick

Participant

I forgot to say about columngroup. Exception appear if all fields in group doesn’t exists in data.

For example:

admin_notes: ""
coupon.duration: 0
coupon.expires_at: "01/01/3000"
id: 1
order.created_at: "04/14/2016"
order.id: 5
order.state: "Cancelled"
order.total_price: 4
order_id: 5
product.id: 1
product.name: "example"

can be exported, but:

admin_notes: ""
id: 1
order.created_at: "04/14/2016"
order.id: 5
order.state: "Cancelled"
order.total_price: 4
order_id: 5
product.id: 1
product.name: "example"

not

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.