How to line up aggregates under grid columns

[kmsParticipant]

In my groupsrenderer function I stored my aggregate metrics for each column in variables something like this:
var aggCol1 = this.getcolumnaggregateddata(“Column 1”, [‘sum’], true, data.subItems);
var aggCol2 = this.getcolumnaggregateddata(“Column 2”, [‘avg’], true, data.subItems);
var aggCol3 = this.getcolumnaggregateddata(“Column 3”, [‘avg’], true, data.subItems);
…
I calculated the offset pixels to column 1 by trial and error and set a variable to that, and set offset pixels for each of the other columns into their own variable something like this:
var offsetPixels = 230;
// I’ll tell you about aggMetricsOffset in a second
offsetPixels += aggMetricsOffset;
var offsetCol2 = offsetPixels + 90 // 90 == width of column 1
var offsetCol3 = offsetCol2 + 70 // 70 == width of column 2

aggMetricsOffset defined at global level and defaults to 30 pixels (the width of the little arrow blocks on the left of grouping rows)
because I have the grid initially display with one grouping level.
aggMetricsOffset gets changed inside of the grids groupschanged function so that every time a group is added or removed
the offset to the start of the aggregate metrics gets adjusted the correct number of 30 pixels to the left or right something
like this:

$(“#jqxGrid”).on(“groupschanged”,
function (event)
{
var args = event.args;
var groups = args.groups;
aggMetricsOffset = 0;
if( groups.length == 2 ) aggMetricsOffset = 30;
if( groups.length == 3 ) aggMetricsOffset = 60;
$(“#jqxGrid”).jqxGrid(‘render’);
});

And finally back inside the groupsrenderer function the return string value gets built something like this:

return ‘<div class=”jqx-grid-groups-row” style=”display: inline;”><span>’ + group + ‘, </span>’ +
‘<span class=”jqx-grid-groups-row-details”>’ + ‘(‘ + count + ‘)’ + ‘</span>’ +
‘<div style=”left:’ + offsetPixels + ‘px;width:80px;display:inline;position:absolute” ><b>Averages:</b></div>’ +
‘<div style=”left:’ + offsetCol2 + ‘px;width:90px;display:inline;position:absolute;” >’ +
‘<span class=”jqx-grid-groups-row-details”>’ + aggCol2.avg + ‘</span></div>’ +
‘<div style=”left:’ + offsetCol3 + ‘px;width:70px;display:inline;position:absolute” >’ +
‘<span class=”jqx-grid-groups-row-details”>’ + aggCol3.avg) + ‘</span></div></div>’

[libibdParticipant]

Hi,
I need to line up me aggregates under grid columns but it doesn’t seem to work, what am I doing wrong?

var groupsrenderer = function (text, group, expanded, data) {
var text = data.groupcolumn.text + ‘: ‘ + group;

if (data.subItems.length > 0)
{
var aggregate_nowTillEnd = this.getcolumnaggregateddata(“nowTillEnd”, [‘sum’], true, data.subItems);
var aggregate_fullCurrMonth = this.getcolumnaggregateddata(“fullCurrMonth”, [‘sum’], true, data.subItems);
var aggregate_nextMonth = this.getcolumnaggregateddata(“nextMonth”, [‘sum’], true, data.subItems);
}

var renderstring = ‘<div class=”jqx-grid-groups-row” style=”display: inline;”>’ +
‘<span class=”jqx-grid-groups-row-details”>’ + text + ‘ </span>’ +
‘<div style=”right:250px;width:80px;display:inline;position:absolute”><span class=”jqx-grid-groups-row-details”>’ + aggregate_nowTillEnd.sum + ‘</span></div>’ +
‘<div style=”right:350px;width:80px;display:inline;position:absolute”><span class=”jqx-grid-groups-row-details”>’ + aggregate_fullCurrMonth.sum + ‘</span></div>’ +
‘<div style=”right:450px;width:80px;display:inline;position:absolute”><span class=”jqx-grid-groups-row-details”>’ + aggregate_nextMonth.sum + ‘</span></div>’ +
‘</div>’;

return renderstring;

}

[ivailoParticipant]

Hi libibd,

Please send a jsEditor demo with your whole code for better analyze of the problem.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[libibdParticipant]

Hi Ivailo,
Here is my code, it’s a mix of your samples and the snip code above:

Please advice how to line up total aggregate with Price column.
SOS

[ivailoParticipant]

Hi libibd,

You can try to align your aggregate in same way as the rest of the columns.
Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts