jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by ngchagas 10 years, 8 months ago.

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

Author

jqxButtons Posts
September 27, 2014 at 1:16 am jqxButtons #60178

ngchagas
Participant

Hi,
why the export buttons do not have the same aspect of the examples and do not work?
Best regards,
Nilton

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In this sample is demonstrated how to override the built-in rendering of the Groups headers. The Grouping of Product and Ship Date columns is disabled.</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<meta charset=”utf-8″>
<script type=”text/javascript” src=”../../scripts/jquery-1.10.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/jqxcheckbox.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/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=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.aggregates.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/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

var source;
var groupsrenderer;
var dataAdapter = new $.jqx.dataAdapter(source);
var theme;

// prepare the data

var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’, type: ‘number’ },
{ name: ‘regiao’, type: ‘string’ },
{ name: ‘filial’, type: ‘string’ },
{ name: ‘segmento’, type: ‘string’ },
{ name: ‘familia’, type: ‘string’ },
{ name: ‘competencia’, type: ‘string’ },
{ name: ‘valor’, type: ‘number’ }

],
url: ‘./painel.php’,

//url: ‘http://www.virtual.qq:8080/TesteRestful/webresources/mypath’,

cache: false,
id: ‘id’
};

var dataAdapter = new $.jqx.dataAdapter(source);
var theme = ‘energyblue’;
var toThemeProperty = function (className) {
return className + ” ” + className + “-” + theme;
};

var groupsrenderer = function (text, group, expanded, data) {
var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
// var text = data.groupcolumn.text + ‘: ‘ + number;
var text = number;

// console.log(text);
if (data.subItems.length > 0) {
var aggregate = this.getcolumnaggregateddata(‘valor’, [‘sum’], true, data.subItems);
// var aggregate2 = this.getcolumnaggregateddata(‘qtde’, [‘sum’], true, data.subItems);
// var aggregate3 = this.getcolumnaggregateddata(‘produto’, [‘count’], true, data.subItems);

} else {
var rows = new Array();
var getRows = function (group, rows) {
if (group.subGroups.length > 0) {
for (var i = 0; i < group.subGroups.length; i++) {
getRows(group.subGroups[i], rows);
}
} else {
for (var i = 0; i < group.subItems.length; i++) {
rows.push(group.subItems[i]);
}
}
}
getRows(data, rows);
var aggregate = this.getcolumnaggregateddata(‘valor’, [‘sum’], true, rows);
// var aggregate2 = this.getcolumnaggregateddata(‘qtde’, [‘sum’], true, rows);
// var aggregate3 = this.getcolumnaggregateddata(‘produto’, [‘count’], true, rows);
}
// var t1 = text + ‘ (Qtde SKUs: ‘ + aggregate3.count + ‘) — (Qtde Peças: ‘ + aggregate2.sum + ‘) — (Valor Total: ‘ + aggregate.sum + ‘)’;
var t1 = text + ‘ ( ∑ Valor: ‘ + aggregate.sum + ‘ )’;
return t1;
}

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
autowidth: true,
theme: ‘energyblue’,
height: 500,
showstatusbar: true,
statusbarheight: 25,
filterable: true,
filtermode: ‘excel’,
autoshowfiltericon: false,
sortable : true,
altrows: true,
editable: false,
showaggregates: true,
groupable: true,
groupsrenderer: groupsrenderer,
// selectionmode: ‘multiplecellsextended’,
columns: [
{ text: ‘Região’, groupable: true, datafield: ‘regiao’, filterable: true, width: 250, align: ‘center’ },
{ text: ‘Loja’, groupable: true, filterable: true, datafield: ‘filial’, width: 250 , align: ‘center’},
{ text: ‘Segmento’, groupable: true, filterable: true, datafield: ‘segmento’, width: 200, align: ‘center’ },
{ text: ‘Família’, groupable: true, filterable: true, columntype: ‘dropdownlist’, datafield: ‘familia’, width: 150, align: ‘center’ },
{ text: ‘Dia’, groupable: true, filterable: true, columntype: ‘dropdownlist’, datafield: ‘competencia’, width: 55, align: ‘center’ },
{ text: ‘Valor’, groupable: false , datafield: ‘valor’, filterable: false, cellsalign: ‘right’, width: 150, align: ‘center’, cellsformat: ‘c2’,
aggregates: [{ ‘<b>∑ </b>’:
function (aggregatedValue, currentValue, column, record) {
var total = currentValue;
return aggregatedValue + total;
}
}]
}]
});
$(“#excelExport”).jqxButton({ theme: theme });
$(“#xmlExport”).jqxButton({ theme: theme });
$(“#csvExport”).jqxButton({ theme: theme });
$(“#tsvExport”).jqxButton({ theme: theme });
$(“#htmlExport”).jqxButton({ theme: theme });
$(“#jsonExport”).jqxButton({ theme: theme });

$(“#excelExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});
$(“#xmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xml’, ‘jqxGrid’);
});
$(“#csvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘jqxGrid’);
});
$(“#tsvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘tsv’, ‘jqxGrid’);
});
$(“#htmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’, ‘jqxGrid’);
});
$(“#jsonExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘json’, ‘jqxGrid’);
});

});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
<div style=’margin-top: 20px;’>
<div style=’float: left;’>
<input type=”button” value=”Export to Excel” id=’excelExport’ />
<br /><br />
<input type=”button” value=”Export to XML” id=’xmlExport’ />
</div>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Export to CSV” id=’csvExport’ />
<br /><br />
<input type=”button” value=”Export to TSV” id=’tsvExport’ />
</div>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Export to HTML” id=’htmlExport’ />
<br /><br />
<input type=”button” value=”Export to JSON” id=’jsonExport’ />
</div>
</div>
</div>
</body>
</html>

September 27, 2014 at 9:48 am jqxButtons #60189

Peter Stoev
Keymaster

Hi ngchagas,

In this code, you used API which we do not have. Please, take a look at the Grid’s API because you can use only documented API. For example, there is no property called autowidth. I do not know why you assumed that there is. Setting this property creates a JavaScript error.

Best Regards,
Peter Stoev

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

September 27, 2014 at 1:12 pm jqxButtons #60191

ngchagas
Participant

ok Peter, I just was testing.
however, the issue remains, even removing “autowidth” using “jquery-1.11.1.min.js”.
Thanks.

September 27, 2014 at 1:19 pm jqxButtons #60192

ngchagas
Participant

Peter,
you are correct. although it works, autowidth is the reason for the problem.
Works fine now.
Thanks.

September 27, 2014 at 1:21 pm jqxButtons #60193

Peter Stoev
Keymaster

Hi ngchagas,

“why the export buttons do not have the same aspect of the examples and do not work?” – what do you mean by that? How are they supposed to work according to you? As far as I see from your code, the buttons call the “exportdata” method with correct parameters which is OK.

Best Regards,
Peter Stoev

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

September 27, 2014 at 2:55 pm jqxButtons #60194

ngchagas
Participant

Peter,
autowidth was preventing the export, and the buttons were not the same shape / appearance of examples.
But now everything is working fine. I remove autowidth.
Author

Posts

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

You must be logged in to reply to this topic.