jQuery UI Widgets Forums Grid Weird JS error when exporting my jqxGrid

This topic contains 7 replies, has 5 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • Coloco
    Participant

    Greetings,

    I’ve been making a jqxGrid the past few days, and my final step is to export its content to Excel (xls).

    I have looked at the API and I tried using the exportdata method. However, whenever I click on my jqxButton that toggles it, I get a javascript error in jqxdata.js (line 7, Char 51709) : TypeError: ae.parseDate is not a function. Also, on IE8 I get an error in jqxdata.export.js (line 7, char 60453) with n=r.createElementNS("http://www.w3.org/1999/xhtml","a").

    The example JSFiddle works fine for me. I use JSON as a datatype so I edited the fiddle to use JSON too and it worked fine, so it’s not a problem related to the datatype.

    Using jqx-all.js instead of including all the necessary .js files leads to the same result.

    I thought it might be linked to my data itself but I don’t really know what to change. I have two columns, and one of the two I’m using to group my data. Here’s a picture for better understanding :

    The top button adds one or multiple row(s), the next one deletes one or multiple row(s), and the one at the very bottom is supposed to export the data.

    My code is getting kinda big and messy so it’s not easy to find what’s causing the issue. Perhaps you guys have a clue of what’s going on.

    Here’s the HTML/JS (some bits are in French, I have also removed and edited some texts – I’m using Twig to get the table’s content, so don’t freak out when you see {{ }}) :

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
            <link rel="stylesheet" type="text/css" href="../../lib/jqwidgets/styles/jqx.base.css"/>
            <link rel="stylesheet" type="text/css" href="../../lib/jqwidgets/styles/theme.css"/>
            <link rel=stylesheet type="text/css" href="../../css/home.css"/>
            <link rel=stylesheet type="text/css" href="../../css/fonctions.css"/>
        </head>
        <body>
            <script type="text/javascript" src="../../lib/jquery/jquery-1.11.2.min.js"></script>
    
            <script type="text/javascript" src="../../lib/jqwidgets/jqxcore.js"></script>
            <script type="text/javascript" src="../../lib/jqwidgets/jqxmenu.js"></script>
            <script type="text/javascript" src="../../lib/jqwidgets/jqxbuttons.js"></script>
            <script type="text/javascript" src="../../lib/jqwidgets/jqxinput.js"></script>
            <script type="text/javascript" src="../../lib/jqwidgets/jqxscrollbar.js"></script>
            <script type="text/javascript" src="../../lib/jqwidgets/jqxlistbox.js"></script>
            <script type="text/javascript" src="../../lib/jqwidgets/jqxdropdownlist.js"></script>    
            <script type="text/javascript" src="../../lib/jqwidgets/jqxvalidator.js"></script>
            <script type="text/javascript" src="../../lib/jqwidgets/jqxdata.js"></script> 
            <script type="text/javascript" src="../../lib/jqwidgets/jqxdata.export.js"></script> 
    
            <script type="text/javascript" src="../../lib/jqwidgets/jqxgrid.js"></script>
            <script type="text/javascript" src="../../lib/jqwidgets/jqxgrid.edit.js"></script>          
            <script type="text/javascript" src="../../lib/jqwidgets/jqxgrid.export.js"></script>
            <script type="text/javascript" src="../../lib/jqwidgets/jqxgrid.grouping.js"></script>
            <script type="text/javascript" src="../../lib/jqwidgets/jqxgrid.selection.js"></script> 
            <script type="text/javascript" src="../../lib/jqwidgets/jqxgrid.sort.js"></script>
            <script type="text/javascript" src="../../lib/js/titlecase.js"></script>
    
            <script type="text/javascript">
                var hauteur = 20;
                var largeur = "73%";
                var theme="theme";
    
                $(document).ready(function(){
                    $("#menu").jqxMenu({
                        height:30,
                        width:"389px",
                        theme:theme,});
                    $("#fonction").jqxInput({
                        theme:theme,
                        placeHolder:"Entrez la ou les fonction(s)",
                        height:hauteur,
                        width:largeur,
                    });
    
                    nomServices = [];
                    var sourceService = $.parseJSON('{{service|json_encode()|raw}}');
                    for (i=0; i < sourceService.length; i++){
                        nomServices.push(toTitleCase(sourceService[i]['nomEntite']));
                    }
                    $("#service").jqxDropDownList({
                        source:nomServices,
                        theme:theme,
                        filterable:true,
                        searchMode:'containsignorecase',
                        width:largeur,
                        height:hauteur,
                        selectedIndex:0,
                        filterPlaceHolder:"Recherche :",
    
                    });
    
                    var localizationobj = {};
                    localizationobj.groupsheaderstring = "Faites glisser une colonne ici pour grouper les résultats avec celle-ci";
                    localizationobj.sortascendingstring = "Trier dans l'ordre croissant";
                    localizationobj.sortdescendingstring = "Trier dans l'ordre décroissant";
                    localizationobj.sortremovestring = "Supprimer le tri";
                    localizationobj.groupbystring = "Grouper avec cette colonne";
                    localizationobj.groupremovestring = "Supprimer des groupes";
                    var fonctionsEnBase = '{{fonctions|json_encode()|raw}}';
                    fonctionsEnBase = JSONToTitleCase(fonctionsEnBase, "nomEntite");
    
                    var sourceGrid = {
                        localdata:fonctionsEnBase,
                        datatype:"json",
                        addrow: function(rowid, rowdata, position, commit){
                            var simpleRowData = new Array();
                            for (var i = 0; i < rowdata.length; i++){
                                simpleRowData.push($.trim(rowdata[i]['nomFonction']));
                            }
                            $.post("db/ajouterFonction.php", {data: JSON.stringify(simpleRowData), service:rowdata[0]['idEntite']});
    
                            commit(true);
                        },
                        updaterow: function(rowid, rowdata, commit){
                            $.post("db/majFonction.php", {id: rowdata['idFonction'], newFonction: rowdata['nomFonction']});
                            commit(true);
                        },
                        deleterow: function(rowid, commit){
                            var realId = new Array();
                            for (var i = 0; i < rowid.length; i++){
                                realId.push($("#jqxGrid").jqxGrid('getrowdatabyid', rowid[i])['idFonction']);
                            }
                            $.post("db/supprimerFonction.php", {id: JSON.stringify(realId)});
                            commit(true);
                        }
                    };
    
                    var dataAdapter = new $.jqx.dataAdapter(sourceGrid);
    
                    $("#jqxGrid").jqxGrid({
                        groupable:true,
                        theme:theme,
                        source:dataAdapter,
                        selectionmode:'multiplerowsextended',
                        width:"100%",
                        editable:true,
                        altrows:true,
                        columns: [
                            {text: 'Service', datafield: 'nomEntite', width:"50%"},
                            {text: 'Fonction', datafield: 'nomFonction', width:"50%"}
                        ],
                        groups:['nomEntite'],
    
                    });
    
                    $("#jqxGrid").jqxGrid('editmode','selectedcell');
                    $("#nomFonction").on('change', function (event) {
                        var datafield = event.target.id;
                        $("#jqxGrid").jqxGrid('setcolumnproperty', datafield, 'editable', event.args.checked);
                    }); 
    
                    $("#jqxGrid").jqxGrid('localizeStrings',localizationobj);        
    
                    $("#ajouter").jqxButton({
                        width:largeur,
                        height:'25px',
                        theme:theme,
                    });
    
                    $("#ajouter").on('click',function(){
                        $("#jqxGrid").jqxGrid('beginUpdate');
                        var fonctions = $("#fonction").val().split(";");
                        var rows = new Array();
                        for (var i=0; i < fonctions.length; i++) {
                            var datarow = {};
                            datarow["nomEntite"] = $("#service").val();
                            datarow["nomFonction"] = fonctions[i];
                            datarow["idEntite"] = $("#service").jqxDropDownList('selectedIndex') + 1;
                            rows.push(datarow);
                        }
                        // si non vide
                        if (rows[0]["nomFonction"]){
                            var commit = $("#jqxGrid").jqxGrid('addrow', null, rows); 
                            $("#jqxGrid").jqxGrid('endUpdate');
                        }
                    });
    
                    $("#deleterowbutton").jqxButton({
                        theme:theme,
                        width:largeur,
                        height:"25px"});
    
                    // delete row.
                    $("#deleterowbutton").on('click', function () {
                        var selectedrowindexes = $("#jqxGrid").jqxGrid('getselectedrowindexes');
                        var rowscount = $("#jqxGrid").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindexes[0] >= 0 && selectedrowindexes.length < rowscount) {
                            var id = new Array();
                            for (var i=0; i < selectedrowindexes.length; i++){
    
                                id.push($("#jqxGrid").jqxGrid('getrowid', selectedrowindexes[i]));
                            }
                            var commit = $("#jqxGrid").jqxGrid('deleterow', id);
                        }
                    });
    
                    $("#formulaire").jqxValidator({
                        rules:[
                            { input: '#fonction', message: "Merci de spécifier au moins une fonction", action: 'keyup', rule: 'required' }
                        ]
                    });
    
                    $("#toExcel").jqxButton({
                        theme:theme,
                        width:"100%",
                        height:"33px",
                    });
    
                    // The method call that creates the problem
                    $("#toExcel").on('click',function(){
                        $("#jqxGrid").jqxGrid('exportdata', 'xls', 'fonctions');  
                    });
                });
    
            </script>
    
            <form name="formulaire" id="formulaire" class="formulaire" action="#">
                <div id="wrapperChampsFormulaire" class="wrapperChampsFormulaire">
                    <div id="wrapperFonction" class="wrapperFonction">
                        <label for="fonction">Fonction :</label>
                        <input id="fonction" type="text" />
                        <p class="aideFonction">Vous pouvez définir plusieurs fonctions par service en les délimitant par des point-virgules : ";"</p>
                    </div>
                    <div id="wrapperService" class="wrapperService">
                        <label>Service :</label>
                        <div id="service"></div>
                    </div>
                    <div id="wrapperAjouter" class="wrapperValider">
                        <input type="submit" value="Ajouter" id="ajouter"/>
                    </div>
                    <div id="wrapperSupprimer" class="wrapperValider">
                        <input id="deleterowbutton" type="button" value="Supprimer les champs sélectionnés" />
                    </div>
                </div>
            </form>
            <div id="tableauFonctions" class="tableauFonctions">
                <div id="jqxGrid"></div>
    
                <input type="button" id="toExcel" class="toExcel" value="Exporter sous forme de tableur">
            </div>
            </div>
        </body>
    </html>
    

    Thank you in advance,

    Coloco.


    Nadezhda
    Participant

    Hello Coloco,

    I would suggest you update to the latest version of jQWidgets (3.8.0). For more information you may refer to the following forum topic: http://www.jqwidgets.com/community/topic/singlerow-doesnt-work-parsedate-error-in-jqxdata-js/#post-71025.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    amitgpandey
    Participant

    Hi Nadezhda,

    Even I was getting this problem. Re downloading 3.8.0 fixed the issue but now I am getting another weird issue, I am exporting the data to html, but in the resultant some of the columns are getting converted to date and all the cells of those columns have the value “12/31/1969”. Please suggest what should I do?

    Thanks,
    Amit


    Nadezhda
    Participant

    Hi Amit,

    Please, provide us with a code sample or JSFiddle example demonstrating the behaviour so we can test to determine the source of the issue.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    Coloco
    Participant

    Thanks for the input, I don’t actually need to export my grid anymore but I redownloaded 3.8 anyway.

    However, I’m facing a new problem with my new grid : upon page load, the grid will have the background of the scrollbar on the right side, even tho there’s no need for the scrollbar to be there. If I resize the page, the scrollbar disappears and everything is fine.

    At page load :

    After resizing :

    I have found that this only happens if I use a pageable grid and dimensions in % and not in pixels.
    It also doesn’t seem to happen if I remove my dataSource. It also doesn’t happen if I remove autoheight and if I don’t set a pagesize.
    It also fixes itself if I change the number of rows shown at the bottom right (even if I switch back to 28).

    Here’s my full jqxGrid code :

    var sourceGrid = {
                        localdata:fonctionsEnBase,
                        datatype:"json",
                    };
    
                    var dataAdapter = new $.jqx.dataAdapter(sourceGrid);
    
                    $("#jqxGrid").jqxGrid({
                        groupable:true,
                        sortable:true,
                        theme:theme,
                        source:dataAdapter,
                        selectionmode:'multiplerowsextended',
                        width:"100%",
                        autoheight:true,
                        editable:true,
                        pageable: true,                    
                        pagesizeoptions:[8,16,22,28],
                        pagesize:28,
                        altrows:true,
                        columnsresize: true,
                        columns: [
                            {text: 'Nom IUM', datafield: 'nom_ium', width:"10%"},
                            {text: 'Nom', datafield: 'nom', width:"10%"},
                            {text: 'Prénom', datafield: 'prenom', width:"7%"},
                            {text: 'Service', datafield: 'nomEntite', width:"20%"},
                            {text: 'Emploi', datafield: 'nomEmploi', width:"16%"},
                            {text: 'Fonction', datafield: 'nomFonction', },
                        ],
    
                    });
    
                    $("#jqxGrid").jqxGrid('editmode','selectedcell');
    
                    $("#jqxGrid").jqxGrid('localizeStrings',localizationobj);     

    Thanks in advance,

    Coloco


    Dimitar
    Participant

    Hello Coloco,

    Thank you for your feedback. We confirm the reported issue.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Vinay Uppin
    Participant

    I’ve implemented the exporting jqxgrid to excel, Its working completely fine in chrome, but not working in IE 11, i checked in developers tool to degug the issue, its making a request to export server http://jquerygrid.net/export_server/save-file.php. But its stuck there, no response at all. and there is no error in console. I’m Using JQWidgets V3.9.1, can you please help me out, what could be the issue??


    Dimitar
    Participant

    Hello Vinay Uppin,

    We were not able to reproduce the reported issue. Please note, however, that if you purchase a Developer or Enterprise License, you will gain access to the file save-file.php and you will be able to host it on your own server.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.