jQuery UI Widgets › Forums › DataTable › Data export not working in 4D Webarea
Tagged: 4D, csv, datatable, export, javascript datatable, jquery datatable, jqwidgets datatable, XLS
This topic contains 1 reply, has 2 voices, and was last updated by Hristo 7 years, 9 months ago.
-
Author
-
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>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 HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.