jQuery UI Widgets › Forums › Grid › Implementation using aggregates
Tagged: aggregates, aggregatesrenderer, custom, grid, jqxgrid
This topic contains 8 replies, has 2 voices, and was last updated by ssp 10 years, 10 months ago.
-
Author
-
Hi,
I am referring to the demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/aggregates.htm?arctic
Plz let me know Is it possible to implement the below requirement ??
I have two columns :
Type | Value
—————————————————
Direct | 10
Direct | 20
Direct | 20
Indirect | 10
—————————————————-
Total: | Direct:50
| Indirect:10Hello ssp,
Here is how to achieve this:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = [{ Type: "Direct", Value: 10 }, { Type: "Direct", Value: 20 }, { Type: "Direct", Value: 20 }, { Type: "Indirect", Value: 10 }]; var source = { localdata: data, datatype: "array", datafields: [ { name: 'Type', type: 'string' }, { name: 'Value', type: 'number' } ], updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command commit(true); } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 180, autoheight: true, source: dataAdapter, showstatusbar: true, statusbarheight: 45, altrows: true, showaggregates: true, columns: [ { text: 'Type', columntype: 'textbox', datafield: 'Type', width: 90 }, { text: 'Value', datafield: 'Value', columntype: 'textbox', width: 90, aggregates: [{ 'Direct': function (aggregatedValue, currentValue, datafield, rowdata) { if (rowdata.Type == "Direct") { return aggregatedValue + currentValue; } return aggregatedValue; } }, { 'Indirect': function (aggregatedValue, currentValue, datafield, rowdata) { if (rowdata.Type == "Indirect") { return aggregatedValue + currentValue; } return aggregatedValue; } }] } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
I am able to do the implementation using your given demo,
but on initial loading of empty columns, the aggregate is displayed as [object Object]:0,
only once I enter any values in the cells of the grid, I am able to get the output in proper format like:
| Direct:50
| Indirect:10How will I get the proper format for empty columns on initial page load like:
| Direct:0.0
| Indirect:0.0Do I have to use aggregatesrenderer? If yes, plz let me know how can I achieve this??
Thanks & Regards,
sspHello ssp,
If the grid is empty (“No data to display”) neither aggregates nor aggregatesrenderer is called. Do you mean the cells of the columns are blank? Please make sure you are using the latest version of jQWidgets (3.2.2).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar,
Exactly! I meant when the cells of the columns are empty…I get [object Object]:0,
but for the columns with data in any cell, it is properly displayed
also once I enter data in the empty column, it displays properly as
| Direct:40
| Indirect:10But for empty column this issue is occuring,
plz let me know!!Thanks & Regards,
sspHi ssp,
Are you sure you are using version 3.2.2 of jQWidgets? Do you initialize the grid without a data source or from a source containing empty values for the cells? In the former case, the grid should show “No data to display” and neither aggregates nor aggregatesrenderer will be called.
In the latter case, the aggregates display correctly:
Direct:0
Indirect:0Here is an example:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = [{ Type: "", Value: "" }]; var source = { localdata: data, datatype: "array", datafields: [ { name: 'Type', type: 'string' }, { name: 'Value', type: 'number' } ], updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command commit(true); } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 180, autoheight: true, source: dataAdapter, showstatusbar: true, statusbarheight: 45, altrows: true, showaggregates: true, columns: [ { text: 'Type', columntype: 'textbox', datafield: 'Type', width: 90 }, { text: 'Value', datafield: 'Value', columntype: 'textbox', width: 90, aggregates: [{ 'Direct': function (aggregatedValue, currentValue, datafield, rowdata) { if (rowdata.Type == "Direct") { return aggregatedValue + currentValue; } return aggregatedValue; } }, { 'Indirect': function (aggregatedValue, currentValue, datafield, rowdata) { if (rowdata.Type == "Indirect") { return aggregatedValue + currentValue; } return aggregatedValue; } }] } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dimitar,
I am using version 3.2.1 of jQWidgets throughout my application,
And for empty grid, I do get the msg “No data to display”
I am not referring to the empty grid here, rather when few columns of the grid have data and few columns are empty!?var wklyData =ColGridDataField; // prepare the data var wklysrc = { datatype: "json", datafields:dataFieldColumns, localdata: wklyData, addrow: function (rowid, rowdata, position, commit) { commit(true); } }; var dataAdapter2 = new $.jqx.dataAdapter(wklysrc, { downloadComplete: function (wklyData, status, xhr) { }, loadComplete: function (wklyData) { }, loadError: function (xhr, status, error) { } }); $("#jqxgridWeekly").jqxGrid( { width: 1015, source: dataAdapter2, ...
…
aggregates: [{ 'D': function (aggregatedValue, currentValue,column,record) { if(record['LPN'] != null && record['LPN'] != "") { // aggregatedValue=aggregatedValue+aggregatedValue; //alert("aggr:"+aggregatedValue+"curr:"+currentValue); if(currentValue == ""){ currentValue =0; } return aggregatedValue+currentValue; } // alert("ret:"+aggregatedValue); return aggregatedValue; } }, { 'T': function (aggregatedValue, currentValue,column,record) { // if( record['LPN'] == "") // { if(currentValue == ""){ currentValue =0; } return aggregatedValue + currentValue; // } return aggregatedValue; } } ],
….
Hi ssp,
There is no such behaviour on our side, as you can see from this example:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = [{ Type: "", Value: "" }, { Type: "Direct", Value: 20 }, { Type: "", Value: "" }, { Type: "Direct", Value: 30 }, { Type: "Indirect", Value: 25 }]; var source = { localdata: data, datatype: "array", datafields: [ { name: 'Type', type: 'string' }, { name: 'Value', type: 'number' } ], updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command commit(true); } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 180, autoheight: true, source: dataAdapter, showstatusbar: true, statusbarheight: 45, altrows: true, showaggregates: true, columns: [ { text: 'Type', columntype: 'textbox', datafield: 'Type', width: 90 }, { text: 'Value', datafield: 'Value', columntype: 'textbox', width: 90, aggregates: [{ 'Direct': function (aggregatedValue, currentValue, datafield, rowdata) { if (rowdata.Type == "Direct") { return aggregatedValue + currentValue; } return aggregatedValue; } }, { 'Indirect': function (aggregatedValue, currentValue, datafield, rowdata) { if (rowdata.Type == "Indirect") { return aggregatedValue + currentValue; } return aggregatedValue; } }] } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> </div> </body> </html>
Your issue may come from incorrect datafields or columns settings.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
This was happening bcz in the initial loading of the grid, the empty cells were initialized to null,
this issue is solved when empty cells are loaded with empty string (“”)Thanks & Regards,
ssp -
AuthorPosts
You must be logged in to reply to this topic.