jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

Author

Posts
May 18, 2023 at 1:09 pm in reply to: Hierarchical top level Hierarchical top level #133048

ngchagas
Participant

Hi Svetoslav, thanks for reply.
After my post I found that when the json is inside the code it works fine.
When the json comes from the database API, no.
The json api generate exactly the same format as I posted.
Can there be any difference between the two json ?

May 16, 2023 at 1:20 pm in reply to: JQXTreeGrid setcellvalue error JQXTreeGrid setcellvalue error #133018

ngchagas
Participant

Thanks, works like a charm…

May 9, 2023 at 5:14 pm in reply to: Update column grid Update column grid #132963

ngchagas
Participant

Thanks Svetoslav, works like a charm.

November 25, 2019 at 1:50 pm in reply to: Export grid after update data Export grid after update data #107447

ngchagas
Participant

Hey Martin,
This is a error message: No data to export on console, after execute $(“#jqxgrid”).jqxGrid(‘updatebounddata’,’cells’ );
Below is the actual code. But it also doesn’t work with my code above.
When result==1, it works fine with source.url=’api.php?p1=0′.

bootbox.prompt({
title: “<b>Exportar</b>”,
message: ‘<p>Selecione a opção desejada</p>’,
inputType: ‘radio’,
inputOptions: [
{
text: ‘Registros da data de hoje’,
value: ‘1’,
},
{
text: ‘Toda a base de dados’,
value: ‘2’,
}
],
callback: function (result) {
if(result==2){
source.url = “api.php?p1=1”;
$(“#jqxgrid”).jqxGrid(‘updatebounddata’,’cells’ );
}
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘aprovacoes’, true, null, true, ‘save-file.php’);
return true;
}
});

November 22, 2019 at 7:02 pm in reply to: Change url jqxgrid dynamically Change url jqxgrid dynamically #107427

ngchagas
Participant

I got it.
Just change source.source = url1 ==> source.url = url1;

January 3, 2019 at 5:17 pm in reply to: 3 grids on same tab 3 grids on same tab #103376

ngchagas
Participant

Hi Hristo, thanks. Works like a charm.

May 14, 2015 at 6:34 pm in reply to: How to use save-file.php instead to export via jqwidget server ? How to use save-file.php instead to export via jqwidget server ? #71136

ngchagas
Participant

Solved.

May 5, 2015 at 3:12 pm in reply to: Grid – column lines Grid – column lines #70674

ngchagas
Participant

Hi Dimitar,
in your example also appears in the column “Order Date”, when grouping.

May 5, 2015 at 2:06 pm in reply to: Grid – column lines Grid – column lines #70667

ngchagas
Participant

Hi Dimitar,
Now my problem is that a vertical line appears in each group, as follow this link: http://www.tickimg.com.br/uploads/_jqxgrid.png
Can you help me again ?
BG

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Acompanhamento de Vendas</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>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.office.css” type=”text/css” />
<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/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcalendar.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 theme=’office’;

// prepare the data

var url = “painel_gen.php”;

// prepare the data
var source =
{
datatype: “json”,
type: “POST”,
datafields: [
{ name: ‘cmp01’, type: ‘date’, format: ‘dd/MM/yy’}, // Data
{ name: ‘cmp02’, type: ‘number’ }, // Região
{ name: ‘cmp03’, type: ‘number’ }, // Filial
{ name: ‘cmp04’, type: ‘number’ }, // Matricula
{ name: ‘cmp05’, type: ‘number’ }, // Indicador
{ name: ‘cmp06’, type: ‘number’ }, // VL_Dia
{ name: ‘cmp07’, type: ‘number’ }, // VL_06
{ name: ‘cmp08’, type: ‘number’ }, // VL_07
{ name: ‘cmp09’, type: ‘number’ }, // VL_08
{ name: ‘cmp10’, type: ‘number’ }, // VL_09
{ name: ‘cmp11’, type: ‘number’ }, // VL_10
{ name: ‘cmp12’, type: ‘number’ }, // VL_11
{ name: ‘cmp13’, type: ‘number’ }, // VL_12
{ name: ‘cmp14’, type: ‘number’ }, // VL_13
{ name: ‘cmp15’, type: ‘number’ }, // VL_14
{ name: ‘cmp16’, type: ‘number’ }, // VL_15
{ name: ‘cmp17’, type: ‘number’ }, // VL_16
{ name: ‘cmp18’, type: ‘number’ }, // VL_17
{ name: ‘cmp19’, type: ‘number’ }, // VL_18
{ name: ‘cmp20’, type: ‘number’ }, // VL_19
{ name: ‘cmp21’, type: ‘number’ }, // VL_20
{ name: ‘cmp22’, type: ‘number’ }, // VL_21
{ name: ‘cmp23’, type: ‘number’ }, // VL_22

{ name: ‘cmp24’, type: ‘number’ }, // VL_EXTRA

{ name: ‘cmp25’, type: ‘number’ }, // VL_DIA_PLAN
{ name: ‘cmp26’, type: ‘number’ }, // VL_DIA_REAL
{ name: ‘cmp27’, type: ‘number’ }, // VL_DIA_PROJ

{ name: ‘cmp28’, type: ‘number’ }, // VL_SEM_PLAN
{ name: ‘cmp29’, type: ‘number’ }, // VL_SEM_REAL
{ name: ‘cmp30’, type: ‘number’ }, // VL_SEM_PROJ

{ name: ‘cmp31’, type: ‘number’ }, // VL_MEN_PLAN
{ name: ‘cmp32’, type: ‘number’ }, // VL_MEN_REAL
{ name: ‘cmp33’, type: ‘number’ }, // VL_MEN_PROJ
],
url: url
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadError: function(jqXHR, status, error) {
// alert(“Request failed: ” + error);
// alert(“Erro na carga: ” + error.name + “: ” + error.message);
},
downloadComplete: function(edata, textStatus, jqXHR) {
// alert(“Dados carregados” + source);
},
beforeLoadComplete: function (records) {
// return records;
}
});
var getLocalization = function () {
var localizationobj = {};
localizationobj.groupsheaderstring = “Para agrupar, arraste uma coluna para essa área”;
localizationobj.decimalseparator = “,”;
localizationobj.thousandsseparator = “.”;
return localizationobj;

};

var groupsrenderer = function (text, group, expanded, data) {
var level = data.level;
str = data.groupcolumn.columntype.trimRight();
if (str == ‘datetimeinput’) {
var number = dataAdapter.formatDate(group, data.groupcolumn.cellsformat);
}
else var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);

var text = data.groupcolumn.text + ‘: ‘ + number;

if (data.subItems.length > 0) {

var agg1 = this.getcolumnaggregateddata(‘cmp06’, [‘sum’], true, data.subItems);
var agg2 = this.getcolumnaggregateddata(‘cmp05’, [‘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 agg1 = this.getcolumnaggregateddata(‘cmp06’, [‘sum’], true, rows);
var agg2 = this.getcolumnaggregateddata(‘cmp05’, [‘count’], true, rows);
}
var t2=”;
if (level==0){
var t1 = ‘<span style=”font-weight: bold; color: darkblue”>’ + text + ” ( Qtde: ” + agg2.count + ” ) ( Valor Realizado: ” + agg1.sum + ” )” + “</span>” ;
}
else if (level==1) {
var t1 = ‘<span style=”font-weight: bold; color: green”>’ + text + ” ( Qtde: ” + agg2.count + ” ) ( Valor Realizado: ” + agg1.sum + ” )” + “</span>” ;
}
else var t1 = ‘<span style=”font-weight: bold; color: red”>’ + text + ” ( Qtde: ” + agg2.count + ” ) ( Valor Realizado: ” + agg1.sum + ” )” + “</span>” ;

return t1;

};
// initialize jqxGrid

$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
theme: ‘office’,
width: 1260,
height: 559 ,
showstatusbar: true,
statusbarheight: 26,
// filterable: true,
// autoshowfiltericon: true,
sortable : true,
showaggregates: true,
// showdefaultloadelement: false,
altrows: true,
groupable: true,
groups: [‘cmp03′,’cmp04’],
localization: getLocalization(),
groupsrenderer: groupsrenderer,
columns: [
{
text: ‘#’, pinned: false, sortable: false, filterable: false, editable: false,
groupable: false, draggable: false, resizable: false,
datafield: ”, columntype: ‘number’, align: ‘center’, cellsalign: ‘right’, width: 20,
cellsrenderer: function (row, column, value) {
return “<div style=’margin:4px;’>” + (value + 1) + “</div>”;
}
},
{ text: ‘Data’, pinned: false, groupable: true, datafield: ‘cmp01’, cellsalign: ‘center’, width: 80, align: ‘center’, columntype: ‘datetimeinput ‘, cellsformat: ‘dd/MM/yy’},
{ text: ‘Região’, pinned: false, columntype: ‘string’, groupable: true, datafield: ‘cmp02’, cellsalign: ‘center’, width: 60, align: ‘center’},
{ text: ‘Filial’, pinned: false, columntype: ‘string’, groupable: true, datafield: ‘cmp03’, cellsalign: ‘center’, width: 60, align: ‘center’},
{ text: ‘Matrícula’, pinned: false, columntype: ‘string’, groupable: true, datafield: ‘cmp04’, cellsalign: ‘center’, width: 60, align: ‘center’},
{ text: ‘Indicador’, pinned: false, columntype: ‘string’, groupable: true, datafield: ‘cmp05’, cellsalign: ‘center’, width: 60, align: ‘center’ },
{ text: ‘Total Dia’, groupable: false, pinned: false, datafield: ‘cmp06’, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},

{ text: ’06:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp07’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’07:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp08’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’08:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp09’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’09:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp10’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’10:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp11’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’11:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp12’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’12:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp13’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’13:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp14’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’14:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp15’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’15:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp16’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’16:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp17’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’17:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp18’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’18:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp19’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’19:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp20’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’20:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp21’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’21:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp22’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ’22:00′, columngroup: ‘cab1’, groupable: false, pinned: false, datafield: ‘cmp23’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},

{ text: ‘Meta’, columngroup: ‘cab2’, groupable: false, pinned: false, datafield: ‘cmp25’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ‘Real’, columngroup: ‘cab2’, groupable: false, pinned: false, datafield: ‘cmp26’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ‘Proj’, columngroup: ‘cab2’, groupable: false, pinned: false, datafield: ‘cmp27’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},

{ text: ‘Meta’, columngroup: ‘cab3’, groupable: false, pinned: false, datafield: ‘cmp28’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ‘Real’, columngroup: ‘cab3’, groupable: false, pinned: false, datafield: ‘cmp29’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ‘Proj’, columngroup: ‘cab3’, groupable: false, pinned: false, datafield: ‘cmp30’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},

{ text: ‘Meta’, columngroup: ‘cab4’, groupable: false, pinned: false, datafield: ‘cmp31’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ‘Real’, columngroup: ‘cab4’, groupable: false, pinned: false, datafield: ‘cmp32’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′},
{ text: ‘Proj’, columngroup: ‘cab4’, groupable: false, pinned: false, datafield: ‘cmp33’, filterable: false, cellsalign: ‘right’, width: 60, align: ‘center’, cellsformat:’d2′}

],
columngroups:
[
{ text: ‘Produtividade’, align: ‘center’, name: ‘cab1’ },
{ text: ‘Diário’, align: ‘center’, name: ‘cab2’ },
{ text: ‘Semanal’, align: ‘center’, name: ‘cab3’ },
{ text: ‘Mensal’, align: ‘center’, name: ‘cab4’ },
]
});

// $(“#jqxgrid”).jqxGrid(‘localizestrings’, localizationobj);

$(“#excelExport”).jqxButton({ theme: theme });
$(“#excelExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘jqxGrid’);
});

$(‘#clearfilteringbutton’).jqxButton({ height: 25, theme: theme});
$(‘#clearfilteringbutton’).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});

$(“#refresh”).jqxButton({ theme: theme });
$(“#refresh”).click(function () {
// source.localdata = generatedata(500);
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘cells’);
});

$(“#clear”).jqxButton({ theme: theme });
$(“#clear”).click(function () {
$(“#jqxgrid”).jqxGrid(‘clear’);
});

$(“#print”).jqxButton({ theme: theme });
$(“#print”).click(function () {
var gridContent = $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘pdf’);
var newWindow = window.open(”, ”, ‘width=800, height=500’),
document = newWindow.document.open(),
pageContent =
‘<!DOCTYPE html>\n’ +
‘<html>\n’ +
‘<head>\n’ +
‘<meta charset=”utf-8″ />\n’ +
‘<title>jQWidgets Grid</title>\n’ +
‘</head>\n’ +
‘<body>\n’ + gridContent + ‘\n</body>\n</html>’;
document.write(pageContent);
document.close();
newWindow.print();
});

// clears the filter.

// applies the filter.

});
</script>
<style type=”text/css”>
/* #jqxgrid .jqx-grid-groups-header
{
background-color: seashell;
}
#jqxgrid .jqx-grid-cell-pinned
{
background-color: floralwhite;
}*/

#jqxButton .jqx-fill-state-normal
{
color: floralwhite;
}

#jqxgrid

.jqx-grid-cell-pinned
{
background-color: floralwhite;
}

.jqx-grid-column-header
{
color: darkblue;
font-weight: bold;
}

.jqx-grid-group-cell {
border-width:0 1px 1px 0;
/* border-color: gray; */
}

</style>
</head>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid” style=”font-size: 13px; font-family: Verdana; float: left;”></div>
<div style=’margin-top: 20px;’>
<br><br>
<div style=’float: left;’>
<br>
<input type=”button” value=”Exportar p/ Excel” id=’excelExport’ />
<input type=”button” value=”Refresh Painel” id=’refresh’ />
<input type=”button” value=”Limpar Painel” id=”clear”/>
<input type=”button” value=”Limpar Filtros” id=”clearfilteringbutton” />
<input type=”button” value=”Imprimir” id=’print’ />
</div>
</div>
</div>
</body>
</html>

October 17, 2014 at 4:19 pm in reply to: Loading data message Loading data message #61314

ngchagas
Participant

Perfect.

October 16, 2014 at 1:09 pm in reply to: Loading data message Loading data message #61248

ngchagas
Participant

Can you show me that ?

October 14, 2014 at 12:30 pm in reply to: Gauge – Setting values from json Gauge – Setting values from json #61108

ngchagas
Participant

It’s great, thanks.

October 10, 2014 at 2:24 am in reply to: Grouping by dates Grouping by dates #60917

ngchagas
Participant

Thank you.

October 7, 2014 at 6:30 pm in reply to: Change color group heder line Change color group heder line #60769

ngchagas
Participant

Thanks Dimitar, works fine.

October 6, 2014 at 1:44 pm in reply to: Change color group heder line Change color group heder line #60719

ngchagas
Participant

Hi Dimitar,
and it is possible to get the level of the group in the groupsrenderer ?
So I could format the font of group name to highlight the levels of groups.
BG Ngchagas
Author

Posts

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →