Grid - column lines - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: border, grid, group, grouping, jqx-grid-group-cell, jqxgrid, line, style, vertical

This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 9 years, 8 months ago.

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

Author

Grid – column lines Posts
April 30, 2015 at 1:16 am Grid – column lines #70466

ngchagas
Participant

Hi,
how to show vertical lines in grid when grouping columns ?
BG

April 30, 2015 at 5:44 am Grid – column lines #70468

Dimitar
Participant

Hi BG,

You just need to set the appropriate style to the class jqx-grid-group-cell. Here is an example: http://jsfiddle.net/Dimitar_jQWidgets/ogv7vmzw/.

Best Regards,
Dimitar

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

May 5, 2015 at 2:06 pm 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>

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

ngchagas
Participant

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

May 7, 2015 at 5:56 am Grid – column lines #70757

Dimitar
Participant

Hi BG,

Unfortunately, this is all we can offer on this matter.

Best Regards,
Dimitar

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

Posts

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

You must be logged in to reply to this topic.