Grid Aggregate values not Showing

[amitsahaParticipant]

I have a weird situation where the aggregate sum is not showing however the grid where sum should be displayed that is not coming.
My Implementation includes Backbone with require js

My suspect is that the require dependencies may not be right however jqxgrid.aggregates.js is loading.
My code below
main.js for dependencies

shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },
        handlebars: {
            exports: 'Handlebars'
        },
        bootstrap: {
            deps: [
                'jquery'
            ],
            exports: 'bootstrap',
        },
        bootstrap_select: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'BootsrtrapSelect',
        },
        jqxcore: {
            export: "$",
            deps: ['jquery']
        },
        jqxwindow: {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },        
        jqxdata: {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        jqxbuttons: {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        jqxscrollbar: {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        jqxmenu: {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        jqxgrid: {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        jqxgrid_selection: {
            export: "$",
            deps: ['jquery', "jqxgrid"]
        },
        jqxgrid_aggregates: {
            export: "$",
            deps: ['jquery', "jqxgrid"]
        },
        jqxgrid_columnsresize: {
            export: "$",
            deps: ['jquery', "jqxgrid"],
        },
        jqxgrid_columnsreorder: {
            export: "$",
            deps: ['jquery', "jqxgrid"]
        },
        jqxgrid_sort: {
            export: "$",
            deps: ['jquery', "jqxgrid"]
        },
        jqxexpander: {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        jqxdragdrop: {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        jqxsplitter: {
            export: "$",
            deps: ['jquery', "jqxcore"]
        },
        jqxtooltip: {
            export: "$",
            deps: ['jquery', "jqxgrid"]
        }
    },

And Implementation 

initialize: function() {

this.dailyLoacalSource =
{
datafields:
[
{ name: ‘skill’, type: ‘string’ },
{ name: ‘cumlSl’, type: ‘number’ },
{ name: ‘ibcallOffered’, type: ‘number’ },
{ name: ‘avgAbandonTime’, type: ‘number’ },
{ name: ‘callsAbandoned’, type: ‘number’ },
{ name: ‘callAHT’, type: ‘number’ },
{ name: ‘aSA’, type: ‘number’ },
{ name: ‘cumlAbandonedRate’, type: ‘number’ },
{ name: ‘totalCallsAnswered’, type: ‘number’ }
],
datatype: “array”
};

},

renderDailyMetrics:function(){

dailyColumns = [
{ text: ‘Skill’, dataField: ‘skill’, minwidth: 40, rendered: this.tooltiprenderer, cellsalign: ‘right’ },
{ text: ‘Cuml SL’, dataField: ‘cumlSl’, minwidth: 40, rendered: this.tooltiprenderer, cellsalign: ‘right’,aggregates: [‘sum’, ‘avg’] },
{ text: ‘I/B Calls Offered’, dataField: ‘ibcallOffered’, minwidth: 40, rendered: this.tooltiprenderer, cellsalign: ‘right’,aggregates: [‘sum’, ‘avg’] },
{ text: ‘Avg Abandoned Time’, dataField: ‘avgAbandonTime’, minwidth: 40, rendered: this.tooltiprenderer, cellsalign: ‘right’ },
{ text: ‘Calls Abandoned’, dataField: ‘callsAbandoned’, minwidth: 40, rendered: this.tooltiprenderer, cellsalign: ‘right’ },
{ text: ‘Call AHT’, dataField: ‘callAHT’, cellsalign: ‘right’, minminwidth: 40, rendered: this.tooltiprenderer, cellsalign: ‘right’},
{ text: ‘ASA’, dataField: ‘aSA’, minwidth: 40, rendered: this.tooltiprenderer, cellsalign: ‘right’ },
{ text: ‘Cuml Abandoned Rate’, dataField: ‘cumlAbandonedRate’, minwidth: 40, rendered: this.tooltiprenderer, cellsalign: ‘right’ },
{ text: ‘Total Calls Answered’, dataField: ‘totalCallsAnswered’, minwidth: 40, rendered: this.tooltiprenderer, cellsalign: ‘right’ }
];

var dataAdapter = new $.jqx.dataAdapter(this.dailyLoacalSource);

// create data grid.
$(“#daily”).jqxGrid(
{
width: ‘98%’,
height: 200,
source: dataAdapter,
columnsresize: true,
columnsreorder: false,
sortable: true,
columns: dailyColumns,
enabletooltips: true,
columnsautoresize: true,
showaggregates: true
});

$(‘#queueSplitter’).jqxSplitter({orientation: ‘horizontal’, width: ‘100%’, height: 400, panels: [{ size: 200 ,collapsible: false}, { size: 200,collapsible: false}] });

$(‘#pageSplitter’).jqxSplitter({orientation: ‘horizontal’, width: ‘100%’, height: 1000, panels: [{ size: 200 ,collapsible: false}, { size: 200,collapsible: false}] });
this.getDailyMetrics();

},

getDailyMetrics: function(){
//var loacalSource = loacalSource;
var prev_this = this;
var param = “”;

if(!!this.selectSkillInterval){
param = this.selectSkillInterval.toString();
} else{
param = this.skill.toString();
}

var data = {“skill”: param};
//console.log(data);
this.dailyMetricCollection.fetch({
url : (isLocal) ? (‘js/jsons/daily.json’) : (prev_this.url + ‘/dailystat’),
data: JSON.stringify(data),
type: “POST”,
dataType: “JSON”,
contentType: “application/json”,
})
.done(function() {
prev_this;
//debugger;
prev_this.dailyLoacalSource.localdata = prev_this.dailyMetricCollection.toJSON();
$(“#daily”).jqxGrid(‘updatebounddata’, ‘cells’);
}

},

As you can see in the initialize I am declaring fields in the variable called dailyLoacalSource

In renderDailyMetrics function I am defining my grid with columns and assigning fields from variable dailyLoacalSource

and in get getDailyMetrics function I am making ajax call and assigning the response to datasource of grid
and then updating the grid . Now the grid implementation is correct as the grid data is coming properly only the aggregate is not coming
Screen shot below
Please look into this

[amitsahaParticipant]

Url of the screenshot posted by me.
I was not able to understand how to post screenshot here

http://postimg.org/image/7qw6jvg09/

[DimitarParticipant]

Hello amitsaha,

You also need to set the property showstatusbar to true. Here is an example that shows how to display aggregates: http://jsfiddle.net/jqwidgets/8BE5w/.

Best Regards,
Dimitar

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

[amitsahaParticipant]

Hi Dimitar I tried making show statusbar to true but no luck

            $("#daily").jqxGrid(
            {
              	width: '98%',
              	height: 200,
                source: dataAdapter,
                showstatusbar: true,
                columnsresize: true,
                columnsreorder: false,
                sortable: true,
                columns:  columns,
                enabletooltips: true,
                columnsautoresize: true,
                showaggregates: true
            });

I am suspecting two things 
First may be I am missing any import 
This is the list of jqz imports that I am making
	'jqxcore',
	'jqxwindow',
	'jqxdata',
	'jqxbuttons',
	'jqxscrollbar',
	'jqxmenu',
	'jqxgrid',
	'jqxgrid_selection',
	'jqxgrid_aggregates',
	'jqxgrid_columnsresize',
	'jqxgrid_columnsreorder',
	'jqxgrid_sort',
	'jqxexpander',
	'jqxdragdrop',
	'jqxsplitter',
	'jqxtooltip',

Second in my implementation first I am<strong> defining source </strong>

this.dailySource =
{
datafields:
[
{ name: ‘skill’, type: ‘string’ },
{ name: ‘cumlSl’, type: ‘number’ },
{ name: ‘ibcallOffered’, type: ‘number’ },
{ name: ‘avgAbandonTime’, type: ‘number’ },
{ name: ‘callsAbandoned’, type: ‘number’ },
{ name: ‘callAHT’, type: ‘number’ },
{ name: ‘aSA’, type: ‘number’ },
{ name: ‘cumlAbandonedRate’, type: ‘number’ },
{ name: ‘totalCallsAnswered’, type: ‘number’ }
],
datatype: “array”
};

Then Columns

                this.dailyColumns = [
					{ text: 'Skill', dataField: 'skill', minwidth: 40,  rendered: this.tooltiprenderer, cellsalign: 'right' },
					{ text: 'Cuml SL', dataField: 'cumlSl', minwidth: 40,  rendered: this.tooltiprenderer, cellsalign: 'right',aggregates: ['sum', 'avg'] },
					{ text: 'I/B Calls Offered', dataField: 'ibcallOffered', minwidth: 40,  rendered: this.tooltiprenderer, cellsalign: 'right',aggregates: ['sum', 'avg'] },
					{ text: 'Avg Abandoned Time', dataField: 'avgAbandonTime', minwidth: 40, rendered: this.tooltiprenderer, cellsalign: 'right' },
					{ text: 'Calls Abandoned', dataField: 'callsAbandoned', minwidth: 40, rendered: this.tooltiprenderer, cellsalign: 'right' },
					{ text: 'Call AHT', dataField: 'callAHT', cellsalign: 'right', minminwidth: 40,  rendered: this.tooltiprenderer, cellsalign: 'right'},
					{ text: 'ASA', dataField: 'aSA', minwidth: 40,  rendered: this.tooltiprenderer, cellsalign: 'right' },
					{ text: 'Cuml Abandoned Rate', dataField: 'cumlAbandonedRate', minwidth: 40,  rendered: this.tooltiprenderer, cellsalign: 'right' },
					{ text: 'Total Calls Answered', dataField: 'totalCallsAnswered', minwidth: 40,  rendered: this.tooltiprenderer, cellsalign: 'right' }
                ];

As I want aggregate on second field Cuml Sl so I defined aggregate there 
<strong>
Now I define my grid </strong>

$(“#daily”).jqxGrid(
{
width: ‘98%’,
height: 200,
source: dataAdapter,
showstatusbar: true,
columnsresize: true,
columnsreorder: false,
sortable: true,
columns: columns,
enabletooltips: true,
columnsautoresize: true,
showaggregates: true
});

Then In ajax call I am assigning data to grid

			this.dailyMetricCollection.fetch({
				url : (isLocal) ? ('js/jsons/daily.json') : (prev_this.url + '/dailystat'),
				data: JSON.stringify(data),
				type: "POST",
				dataType: "JSON",
				contentType: "application/json",
				})
				.done(function() {
				prev_this;
				//debugger;
				prev_this.dailyLoacalSource.localdata = prev_this.dailyMetricCollection.toJSON();
                $("#daily").jqxGrid('updatebounddata', 'cells'); 	
                prev_this.setDailyThreshold();
							
			});	

This my sample response JSON data 

[{
“skill”: “CS_ASM_ENG”,
“dbID”: “918”,
“cumlSl”: “11”,
“ibcallOffered”: “4”,
“avgAbandonTime”: “4”,
“callsAbandoned”: “4”,
“callAHT”: “4”,
“aSA”: “4”,
“cumlAbandonedRate”: “4”,
“totalCallsAnswered”: “4”,
“cumlSlTh”: “high”,
“ibcallOfferedTh”: “high”,
“avgAbandonTimeTh”: “medium”,
“callsAbandonedTh”: “high”,
“callAHTTh”: “medium”,
“aSATh”: “medium”,
“cumlAbandonedRateTh”: “medium”,
“totalCallsAnsweredTh”: “medium”
}, {
“skill”: “CS_BSG_ENG”,
“dbID”: “919”,
“cumlSl”: “9”,
“ibcallOffered”: “4”,
“avgAbandonTime”: “4”,
“callsAbandoned”: “4”,
“callAHT”: “4”,
“aSA”: “4”,
“cumlAbandonedRate”: “4”,
“totalCallsAnswered”: “4”,
“cumlSlTh”: “medium”,
“ibcallOfferedTh”: “high”,
“avgAbandonTimeTh”: “low”,
“callsAbandonedTh”: “high”,
“callAHTTh”: “low”,
“aSATh”: “high”,
“cumlAbandonedRateTh”: “medium”,
“totalCallsAnsweredTh”: “medium”
}, {
“skill”: “CS_BSG_SPA”,
“dbID”: “920”,
“cumlSl”: “4”,
“ibcallOffered”: “4”,
“avgAbandonTime”: “4”,
“callsAbandoned”: “4”,
“callAHT”: “4”,
“aSA”: “4”,
“cumlAbandonedRate”: “4”,
“totalCallsAnswered”: “4”,
“cumlSlTh”: “medium”,
“ibcallOfferedTh”: “low”,
“avgAbandonTimeTh”: “high”,
“callsAbandonedTh”: “high”,
“callAHTTh”: “low”,
“aSATh”: “medium”,
“cumlAbandonedRateTh”: “medium”,
“totalCallsAnsweredTh”: “medium”
}]

“cumlSl” the field on which I am assigning aggregate hence in source type defined as number

Am I missing any thing

[amitsahaParticipant]

I got the Issue I had to set the statusbarheight: property meanwhile I have another issue now I there any way I can keep the sum as the last row as now sum is going inside the spitter I am using, can I remove all the blank cells.

[DimitarParticipant]

Hi amitsaha,

The built-in aggregates are always displayed in the grid’s statusbar, but, if you wish, you can use cellsrenderer to show custom information in your last row.

Best Regards,
Dimitar

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

[m.nourParticipant]

How about after grouping, any sample for each group aggregate?

Please help.

Thnx.

[DimitarParticipant]

Hi m.nour,

You can achieve this with the groupsrenderer callback function, as shown in the demo Groups Renderer.

Best Regards,
Dimitar

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

[Author]

Posts