jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by kingdomp 12 years, 6 months ago.

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

Author

exportdata to excel Posts

December 7, 2012 at 6:24 pm exportdata to excel #12082

Participant

Hi,

I have a grid loading by a ajax query. I have a field call comments, in the data file, I slip the line with a tag. After the Ajax request, I replace this tag by a space. His showing correctly in the grid but when I try the to export the data in excel, all my rows was empty for this field. I use the 2.5.5 version with chrome Version 23.0.1271.95 and excel 2007 SP3. If I open the xls or xml files, the data from this field is empty too.

Data in the Grid :

Data in excel :

test.php page :

$(document).ready(function ()
{
var theme = “”;
if (theme==””) {theme=getTheme();}

var source1 ={localdata: “[]”,datatype: “json”};
var dataAdapter1 = new $.jqx.dataAdapter(source1);

$(“#jqxgrid”).jqxGrid({
height: 400,
width: 600,
theme: theme,
columnsresize: true,
filterable: true,
sortable: true,
altrows: true,
source: dataAdapter1,
autoshowfiltericon: true,
showstatusbar: true,
renderstatusbar: function(statusbar)
{
var container = $(“

“);
var ButtonExcel = $(“

Export

“);
container.append(ButtonExcel);
statusbar.append(container);
ButtonExcel.jqxButton({ theme: theme, width: 70, height: 20 });
ButtonExcel.click(function (event) { $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘Supplier’,null);});
},

columns: [
{ text: ‘No.’, datafield: ‘int_supplier’, width: 50 },
{ text: ‘Supplier’, datafield: ‘str_name’, width: 300 },
{ text: ‘Comments’, datafield: ‘str_comments’, width: 150 }
]
});

function GRID_UPDATE()
{
$.ajax(
{
url: “data.php”,
success: function (data, status, xhr)
{
var items = jQuery.parseJSON(data);
for (var i=0;i<items.length;i++)
{
var comments=items[i].str_comments;
items[i].str_comments=comments.replace(/\/gm,’ ‘);
}

source1.localdata = items;
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}
});
}
GRID_UPDATE();
});//End Ready Fonction

The data.php files

[{“int_supplier”:1,”str_name”:”Harbour International Trucks”,”str_comments”:”123″},{“int_supplier”:2,”str_name”:”Buckeye Supply Company”,”str_comments”:””}]

because the html view, the data for the comments files is actually:”1&ltbr&gt2&ltbr&gt3″
same thing for the replace function items[i].str_comments=comments.replace(/\&ltbr&gt/gm,’ ‘);

December 11, 2012 at 6:46 am exportdata to excel #12141

Peter Stoev

Keymaster

Hi kingdomp,

Here’s a working sample based on your code:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.filter.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/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = [{ "int_supplier": 1, "str_name": "Harbour International Trucks", "str_comments": "123" }, { "int_supplier": 2, "str_name": "Buckeye Supply Company", "str_comments": "" }];
            var source1 = {
                localdata: data,
                datafields: [
                    { name: "int_supplier", type: 'int' },
                    { name: "str_name", type: 'string' },
                    { name: "str_comments", type: 'string' },
                ],
                datatype: 'json'
            };
            var dataAdapter1 = new $.jqx.dataAdapter(source1);
            $('#jqxgrid').jqxGrid({
                height: 400,
                width: 600,
                theme: theme,
                columnsresize: true,
                filterable: true,
                sortable: true,
                altrows: true,
                source: dataAdapter1,
                autoshowfiltericon: true,
                showstatusbar: true,
                renderstatusbar: function(statusbar)
                {
                    var container = $('<div></div>');
                    var ButtonExcel = $('<input type="button" value="Export"/>');
                    container.append(ButtonExcel);
                    statusbar.append(container);
                    ButtonExcel.jqxButton({ theme: theme, width: 70, height: 20 });
                    ButtonExcel.click(function (event) { $('#jqxgrid').jqxGrid('exportdata', 'xls', 'Supplier',null);});
                },
                columns: [
                { text: 'No.', datafield: 'int_supplier', width: 50 },
                { text: 'Supplier', datafield: 'str_name', width: 300 },
                { text: 'Comments', datafield: 'str_comments', width: 150 }
                ]
            });
     
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
     
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 11, 2012 at 11:31 pm exportdata to excel #12206

kingdomp

Participant

Thanks Peter,

With your code I understand the mistake. I always thinking the error come when I replace the BR tag by a space but the problem came when I have number in a column. In my example I load the data directly from my database with a AJAX request without giving any specification about the type of the row. Without specified the type : ‘string’, when the export find a number, they cast the column to a number then nothing was export for this column.

Thanks you for your Help.

Author

Posts

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

You must be logged in to reply to this topic.