jQuery UI Widgets Forums DataTable Data export not working in 4D Webarea

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 6 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Data export not working in 4D Webarea #92089

    abdulghaffar
    Participant

    Hi,

    I ma using ‘jqwidgets_4.5.0’ and ‘dataTable’ to crate my view. My backend is in 4D. User can have access by two means, browser and 4D app. In 4D app, same pages are being used to build view for user by using webarea of 4D, and in case of browser, being used to create view. The issue I am facing is that export(csv, xls) working fine in browser, but noting is happening in 4D app. On clicking buttons, it is comes in ‘ $(“#csvExport”).click(function () and $(“#excelExport”).click(function ()’, but no further action. And I am unable to debug the issue. I think ‘jqxdata.export.js’ is being used. But unable to trace the issue.

    Thanks in advance.

    <!DOCTYPE html>
    <html>
    
        <head>
            <link rel="stylesheet" href="jqwidgets_4.5.0/jqwidgets/styles/jqx.base.css" type="text/css" />
            <link rel="stylesheet" href="jqwidgets_4.5.0/jqwidgets/styles/jqx.arctic.css" type="text/css" />
            <script type="text/javascript" src="jqwidgets_4.5.0/scripts/jquery-1.11.1.min.js"></script>
            <script type="text/javascript" src="jqwidgets_4.5.0/jqwidgets/jqxcore.js"></script>
            <script type="text/javascript" src="jqwidgets_4.5.0/jqwidgets/jqxdata.js"></script> 
            <script type="text/javascript" src="jqwidgets_4.5.0/jqwidgets/jqxbuttons.js"></script>
            <script type="text/javascript" src="jqwidgets_4.5.0/jqwidgets/jqxscrollbar.js"></script>
            <script type="text/javascript" src="jqwidgets_4.5.0/jqwidgets/jqxdata.export.js"></script>
            <script type="text/javascript" src="jqwidgets_4.5.0/jqwidgets/jqxdatatable.js"></script> 
            <script type="text/javascript" src="jqwidgets_4.5.0/jqwidgets/jqxtabs.js"></script>
            <script type="text/javascript" src="jqwidgets_4.5.0/jqwidgets/jqxcheckbox.js"></script>
    
            <style type="text/css" title="currentStyle">
    
                .tabl{
                    margin-left:-10px;
                }
    
                .td_title{
                    font-size:12px;
                    font-weight:bold;
                    text-align:right;
                }
    
                .td_content{
                    font-size:12px;
                    text-align:left;
                    /* padding:left:5px; */
                }
    
            </style>    
    
            <script type="text/javascript">
    
                var userID = "$USERID$";
                var eventID = "$EVENTID$";
                var eventDate = "$EVENTDATE$";
    
                var data = new Array();
                var KNT_name = [$ARRKNT_name$];
                var KNT_cat = [$ARRKNT_cat$];
                var KNT_plz = [$ARRKNT_plz$];
                var KNT_ort = [$ARRKNT_ort$];
                var KNT_tel = [$ARRKNT_tel$];
                var KNT_telPriv = [$ARRKNT_telPriv$];
                var KNT_handy = [$ARRKNT_handy$];
                var KNT_adrID = [$ARRKNT_adrID$];
    
                $(document).ready(function () {
    
                    var k = 0;
                    for (var i = 0; i < KNT_name.length; i++) {
                        var row = {};
                        row["name"] = KNT_name[k];
                        row["cat"] = KNT_cat[k];
                        row["plz"] = KNT_plz[k];
                        row["ort"] = KNT_ort[k];
                        row["tel"] = KNT_tel[k];
                        row["telPriv"] = KNT_telPriv[k];
                        row["handy"] = KNT_handy[k];
                        row["adrID"] = KNT_adrID[k];
                        data[i] = row;
                        k++;
                    }
    
                    var source =
                            {
                                localData: data,
                                dataType: "array"
                            };
    
                    // initialize the row details.
                    var initRowDetails = function (id, row, element, rowinfo) {
                        //alert("initRowDeatails_id: "+id+"  kltID: "+KNT_adrID[id]);
                        rowinfo.detailsHeight = 220;
                        var detid = "DET_" + id;
                        element.append($("<div id='" + detid + "' style='margin: 10px;'>Row Details</div>"));
                        setTimeout("loadDetailInfo('" + detid + "','" + KNT_adrID[id] + "'); ", 50);
                    }
    
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    $("#dataTable").jqxDataTable(
                            {
                                width: '100%',
                                height: $LISTHEIGHT$,
                                theme: 'arctic',
                                source: dataAdapter,
                                pageable: true,
                                sortable: true,
                                pageSize: 100,
                                rowDetails: true,
                                sortable: true,
                                        ready: function () {
                                            // expand the first details.
                                            //$("#dataTable").jqxDataTable('showDetails', 0);
                                        },
                                initRowDetails: initRowDetails,
                                columns: [
                                    {text: 'Name', dataField: 'name'},
                                    {text: 'PLZ', dataField: 'plz', width: 80},
                                    {text: 'Ort', dataField: 'ort', width: 250},
                                    {text: 'Telefon', dataField: 'tel', width: 130},
                                    {text: 'Tel. privat', dataField: 'telPriv', width: 130},
                                    {text: 'Handy', dataField: 'handy', width: 130}
                                ]
                            });
    
                    // Row - Selection
                    //$("#dataTable").on('rowSelect', function (event) {
                    $("#dataTable").on('rowClick', function (event) {
    
                        // event arguments
                        var args = event.args;
                        // row index
                        var index = args.index;
                        // row data
                        var rowData = args.row;
                        // row key
                        var rowKey = args.key;
                        // data field
                        var dataField = args.dataField;
    
                        onRowSelect(index, rowData, dataField);
    
                        //alert("index: "+index+"  rowDate: "+rowData+" key: "+rowKey+"   resid: "+rowData.ressid);
    
                    });
    
                    $("#excelExport").jqxButton();
                    $("#csvExport").jqxButton();
    
                    $("#excelExport").click(function () {
                        $("#dataTable").jqxDataTable('exportData', 'xls');
                    });
                    $("#csvExport").click(function () {
                        $("#dataTable").jqxDataTable('exportData', 'csv');
                    });
    
                });
    
                function loadDetailInfo(detid, adrid) {
                    var ld = "#" + detid;
                    $(ld).load('instruction?doc=KONT999999&job=submitADRInfo&module=KONT&adrid=' + adrid + '&detid=' + detid + '&uid=' + userID + '&sid=$SESSIONID$');
                }
    
                function showDetailInfo(detid) {
                    // start des TAB-Menus
                    var itm = "#jqxTabs" + detid;
                    $(itm).jqxTabs({width: 750, height: 220, position: 'top'});
                }
    
                function onRowSelect(ix, rowData, dataField) {
                    var adr = rowData.adrID;
                }
            </script>
    
        </head>
        <body class='default'>
    
            <div style='margin-top: 20px;'>
                <div style='float: left;'>
                    <input type="button" value="Export to Excel" id='excelExport' />
                    <input type="button" value="Export to CSV" id='csvExport' />
                </div>
            </div>
            <div id="dataTable" style="margin-top:0px;margin-left:0px;" ></div>
    
        </body>
    </html>
    • This topic was modified 6 years, 11 months ago by  abdulghaffar.
    Data export not working in 4D Webarea #92135

    Hristo
    Participant

    Hello abdulghaffar,

    Unfortunately, we do not have experience with this library.
    I would like to suggest you export data to a variable and then could use it on desire way.

    $('#jqxbutton').click(function () {
        var csv = $("#table").jqxDataTable('exportData', 'csv');
    });

    You need to set up exportSettings property of the DataTable, please, take a look at the source code below.

    exportSettings: {
    	fileName: null
    },

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.