jQuery UI Widgets › Forums › Grid › Export jqxgrid in jqxtabs integration other widgets not working
Tagged: export, Exportdata, grid, initTabContent, Integration, jqxgrid, jqxTabs, Tabs
This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 10 years ago.
-
Author
-
Hi
Can any one help me for this issue. i have jqxgrid in jqxtabs with integration other widget, and i create export button and it’s not working, but if i created jqxgrid without jqxtabs integration it’s working fine, this my code. your advise pleaseee 🙂
<script type=”text/javascript”>
$(document).ready(function () {
var initgridtrans_cu = function () {
var theme = ‘classic’;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘no’,type:’number’},
{ name: ‘transid’,type:’string’},
{ name: ‘tgl_trans’,type:’string’},
{ name: ‘completename’,type:’string’},
{ name: ‘note’,type:’string’},
{ name: ‘ictnumber’,type:’string’},
{ name: ‘serialnumber’,type:’string’},
{ name: ‘brand’,type:’string’},
{ name: ‘namaunit’,type:’string’},
{ name: ‘nmasetgroup’,type:’string’},
{ name: ‘nmasettype’ ,type:’string’},
{ name: ‘pemakai’ ,type:’string’},
],
url: ‘modul/aset/trans_data_cu.php’,
cache: false,
filter: function()
{
// update the grid and send a request to the server.
$(“#gridaset_cu”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function()
{
// update the grid and send a request to the server.
$(“#gridaset_cu”).jqxGrid(‘updatebounddata’, ‘sort’);
},
root: ‘Rows’,
beforeprocessing: function(data)
{
if (data != null)
{
source.totalrecords = data[0].TotalRows;
}
}
};var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);// initialize jqxGrid
$(“#gridaset_cu”).jqxGrid(
{
source: dataadapter,
width:’100%’,
theme: theme,
filterable: true,
sortable: true,
autoheight: true,
scrollmode: ‘deferred’,
//pageable: true,
virtualmode: true,
columnsresize:true,
//rowdetails: true,
//initrowdetails: initrowdetails_back,
rendergridrows: function()
{
//return obj.data;
return dataadapter.records;
},
columns: [
{ text: ‘No’, datafield: ‘no’, width:60},
{ text: ‘Trans No’, datafield: ‘transid’, width:150},
{ text: ‘Date Occured’, datafield: ‘tgl_trans’, width: 200 },
{ text: ‘User’, datafield: ‘pemakai’, width: 140 },
{ text: ‘Ict Number’, datafield: ‘ictnumber’, width:150},
{ text: ‘Number Serial’, datafield: ‘serialnumber’, width:150},
{ text: ‘Unit Name’, datafield: ‘namaunit’, width:150},
{ text: ‘Group Name’, datafield: ‘nmasetgroup’, width:150},
{ text: ‘Aset Type’, datafield: ‘nmasettype’, width:150},
{ text: ‘Brand’, datafield: ‘brand’, width:150},
{ text: ‘Note’, datafield: ‘note’, width: 300 }]
});
$(“#bexp”).jqxButton({ width: ‘100’, height: ’25’});
$(‘#bexp’).click(function(){
$(“#gridaset_cu”).jqxGrid(‘exportdata’, ‘xls’, ‘initgridtrans_cu’);
});}
// init widgets.
var initWidgets = function (tab) {
switch (tab) {
case 0:
initgridtrans_cu();
break;
}
}$(‘#jqxTabs’).jqxTabs({ width: ‘100%’, height: ‘700’,initTabContent: initWidgets,autoHeight: true});
});
</script>Hi eragon,
Is there any error thrown in your browser console when running this code? And is the grid populated correctly in both cases?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar
I don’t have error when running this code, and the grid populate is correctly, thank’s
Hi eragon,
Here is a modification of the demo Integration with other widgets where a button can be successfully used to export a grid inside a tab:
<!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.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.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/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.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/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.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"> $(document).ready(function () { var initGrid = function () { var source = { datatype: "csv", datafields: [ { name: 'Date' }, { name: 'S&P 500' }, { name: 'NASDAQ' } ], url: '../sampledata/nasdaq_vs_sp500.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); $("#jqxGrid").jqxGrid( { width: '100%', height: '84%', source: dataAdapter, columns: [ { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 }, { text: 'S&P 500', datafield: 'S&P 500', width: 150 }, { text: 'NASDAQ', datafield: 'NASDAQ' } ] }); $('#export').jqxButton(); $('#export').click(function () { $("#jqxGrid").jqxGrid('exportdata', 'xls', 'jqxGrid'); }); } var initChart = function () { // prepare the data var source = { datatype: "csv", datafields: [ { name: 'Date' }, { name: 'S&P 500' }, { name: 'NASDAQ' } ], url: '../sampledata/nasdaq_vs_sp500.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // prepare jqxChart settings var settings = { title: "U.S. Stock Market Index Performance (2011)", description: "NASDAQ Composite compared to S&P 500", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, categoryAxis: { dataField: 'Date', formatFunction: function (value) { return months[value.getMonth()]; }, toolTipFormatFunction: function (value) { return value.getDate() + '-' + months[value.getMonth()]; }, type: 'date', baseUnit: 'month', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: true, gridLinesInterval: 3, gridLinesColor: '#888888', valuesOnTicks: false }, colorScheme: 'scheme04', seriesGroups: [ { type: 'line', valueAxis: { displayValueAxis: true, description: 'Daily Closing Price', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'S&P 500', displayText: 'S&P 500' }, { dataField: 'NASDAQ', displayText: 'NASDAQ' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); } // init widgets. var initWidgets = function (tab) { switch (tab) { case 0: initGrid(); break; case 1: initChart(); break; } } $('#jqxTabs').jqxTabs({ width: 600, height: 560, initTabContent: initWidgets }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id='jqxTabs'> <ul> <li style="margin-left: 30px;"> <div style="height: 20px; margin-top: 5px;"> <div style="float: left;"> <img width="16" height="16" src="../../images/catalogicon.png" /> </div> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> US Indexes</div> </div> </li> <li> <div style="height: 20px; margin-top: 5px;"> <div style="float: left;"> <img width="16" height="16" src="../../images/pieicon.png" /> </div> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> NASDAQ compared to S&P 500</div> </div> </li> </ul> <div style="overflow: hidden;"> <div id="jqxGrid"> </div> <button id="export" style="margin-top: 10px;"> Export grid</button> <div style="margin-top: 10px; height: 15%;"> The S&P 500 index finished 2011 less than a point away from where it ended 2010 -- 0.04 points down to be exact. That's the smallest annual change in history. At its peak in April, the S&P had climbed more than 8%. But by October, at the lowest levels of the year, it was down more than 12%. The Nasdaq, meanwhile, lost 1.8% for the year.</div> </div> <div style="overflow: hidden;"> <div id='jqxChart' style="width: 100%; height: 100%"> </div> </div> </div> </div> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/February 24, 2015 at 11:45 am Export jqxgrid in jqxtabs integration other widgets not working #67557Hi Dimitar
Thank’s for your response, but i tried it’s doesn’t work properly, something wrong with my code??
<script type=”text/javascript”>
$(document).ready(function () {
var initGrid = function () {
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Date’ },
{ name: ‘S&P 500’ },
{ name: ‘NASDAQ’ }
],
url: ‘../sampledata/nasdaq_vs_sp500.txt’
};var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
$(“#jqxGrid”).jqxGrid(
{
width: ‘100%’,
height: ‘84%’,
source: dataAdapter,
columns: [
{ text: ‘Date’, datafield: ‘Date’, cellsformat: ‘d’, width: 250 },
{ text: ‘S&P 500’, datafield: ‘S&P 500’, width: 150 },
{ text: ‘NASDAQ’, datafield: ‘NASDAQ’ }
]
});$(“#bexp”).click(function () {
$(“#jqxGrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});}
var initChart = function () {
// prepare the data
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Date’ },
{ name: ‘S&P 500’ },
{ name: ‘NASDAQ’ }
],
url: ‘../sampledata/nasdaq_vs_sp500.txt’
};var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];// prepare jqxChart settings
var settings = {
title: “U.S. Stock Market Index Performance (2011)”,
description: “NASDAQ Composite compared to S&P 500”,
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
dataField: ‘Date’,
formatFunction: function (value) {
return months[value.getMonth()];
},
toolTipFormatFunction: function (value) {
return value.getDate() + ‘-‘ + months[value.getMonth()];
},
type: ‘date’,
baseUnit: ‘month’,
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: ‘#888888’,
unitInterval: 1,
showGridLines: true,
gridLinesInterval: 3,
gridLinesColor: ‘#888888’,
valuesOnTicks: false
},
colorScheme: ‘scheme04’,
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
unitInterval: 500,
minValue: 0,
maxValue: 3000,
displayValueAxis: true,
description: ‘Daily Closing Price’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘S&P 500’, displayText: ‘S&P 500’ },
{ dataField: ‘NASDAQ’, displayText: ‘NASDAQ’ }
]
}
]
};// setup the chart
$(‘#jqxChart’).jqxChart(settings);
}// init widgets.
var initWidgets = function (tab) {
switch (tab) {
case 0:
initGrid();
break;
case 1:
initChart();
break;
}
}$(‘#jqxTabs’).jqxTabs({ width: 600, height: 560, initTabContent: initWidgets });
});
</script>Hi eragon,
Your code seems fine. Make sure you have included references to jqxdata.export.js and jqxgrid.export.js on your page. And are you sure there are no errors in your browser’s console (in Developer Tools / Firebug / F12), even when you click the export button?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.