jQWidgets Forums

Tagged: datagrid jquery control

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 8 months ago.

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

Author

Json Issue Posts
September 29, 2014 at 3:41 pm Json Issue #60269

ngchagas
Participant

Hi,
source json don’t work when the url is explicit. but work when result of the same json is in txt file
BG 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.11.1.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 url = “painel.txt”; // painel.txt contains json result of line below, and works fine
var url= ‘http://www.virtual.qq:8080/TesteRestful/webresources/mypath/’; // don’t work if used directly

// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’, type: ‘int’ },
{ name: ‘filial’, type: ‘int’ },
{ name: ‘tp_segmento’, type: ‘string’ },
{ name: ‘tp_familia’, type: ‘string’ },
{ name: ‘vl_venda’, type: ‘number’ },
{ name: ‘id_indicador’, type: ‘int’ },
{ name: ‘dt_origem’, type: ‘number’ },
{ name: ‘regiao’, type: ‘string’ }
],
url: url
};

var dataAdapter = new $.jqx.dataAdapter(source);
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(‘vl_venda’, [‘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(‘vl_venda’, [‘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,
width: 1100,
height: 500,
showstatusbar: true,
statusbarheight: 25,
filterable: true,

filtermode: ‘excel’,
autoshowfiltericon: false,
sortable : true,
showaggregates: true,
groupable: true,
groupsrenderer: groupsrenderer,
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: ‘tp_segmento’, width: 200, align: ‘center’ },
{ text: ‘Família’, groupable: true, filterable: true, columntype: ‘dropdownlist’, datafield: ‘tp_familia’, width: 150, align: ‘center’ },
// { text: ‘Dia’, groupable: true, filterable: true, columntype: ‘dropdownlist’, datafield: ‘competencia’, width: 55, align: ‘center’ },
{ text: ‘Valor’, groupable: false , datafield: ‘vl_venda’, 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 });

$(“#excelExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘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 />
</div>
</div>
</div>
</body>
</html>

September 29, 2014 at 3:44 pm Json Issue #60270

Peter Stoev
Keymaster

Hi ngchagas,

If you want to load data from Remote Sources, you’ll have to use JSONP – http://en.wikipedia.org/wiki/JSONP. I would suggest you to take a look at the Grid’s Data Binding demos and read the help topics about this widget before using it.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.