jQuery UI Widgets › Forums › Grid › Grid Aggregates
Tagged: aggregate, aggregatesrenderer, grid, jqxgrid, value
This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 10 years, 3 months ago.
-
AuthorGrid Aggregates Posts
-
Hi,
I am dynamically creating columns and no. of columns are not known in advance, so far simple aggregations working fine, but I don’t want the label Sum written in front of each Total. I tried using custom aggregates but seems not working in a string. Here is the example.
Let me know how can i achieve this.This works fine but shows Sum: $9999
cols1 = ‘{ “text”: “‘ + curMonthText + ‘”, “datafield”: “‘ + curMonth + ‘”, “width”: “72”, “cellsalign”: “right”, “align”: “right”, “cellsformat”: “n”, “aggregates”: [“sum”] }’;I want only $99999
cols1 = ‘{ “text”: “‘ + curMonthText + ‘”, “datafield”: “‘ + curMonth + ‘”, “width”: “72”, “cellsalign”: “right”, “align”: “right”, “cellsformat”: “n”, “aggregates”: [{ ‘ +
‘ function (aggregatedValue, currentValue, column, record) { ‘ +
‘ var total = currentValue; ‘ +
‘ return aggregatedValue + total; ‘ +
‘ } ‘ +
‘}]’ + ‘}’;Thanks, Vikas
Hello Vikas,
Here is an example which shows how to use ‘aggregatesrenderer’ to set value without label.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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.edit.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 = generatedata(3); var source = { localdata: data, datatype: "array", datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' } ], updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, showstatusbar: true, statusbarheight: 50, editable: true, showaggregates: true, selectionmode: 'singlecell', columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 }, { text: 'Product', datafield: 'productname', width: 170, aggregates: ['count', { 'Cappuccino Items': function (aggregatedValue, currentValue) { if (currentValue == "Cappuccino") { return aggregatedValue + 1; } return aggregatedValue; } } ] }, { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125, aggregates: [{ 'In Stock': function (aggregatedValue, currentValue) { if (currentValue) { return aggregatedValue + 1; } return aggregatedValue; } }, { 'Not In Stock': function (aggregatedValue, currentValue) { if (!currentValue) { return aggregatedValue + 1; } return aggregatedValue; } } ] }, { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'], aggregatesrenderer: function (aggregates) { var renderstring = ""; $.each(aggregates, function (key, value) { var name = key == 'min' ? 'Min' : 'Max'; renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + name + ': ' + value + '</div>'; }); return renderstring; } }, { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum'], aggregatesrenderer: function (aggregates, column, element, summaryData) { var renderstring = "<div>"; $.each(aggregates, function (key, value) { var name = key == 'price'; renderstring += '<div>' + value + '</div>'; }); renderstring += "</div>"; return renderstring; } } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"></div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi Nadezhda,
Thanks for the prompt reply, but my issue is different. In my case, the no. of columns are month&year about 48months and the column names and values are dynamically created right from the database. Therefore I can not have static function calls since column names and number arent pre-determined.
I am trying this:
cols1 = ‘{ “text”: “‘ + curMonthText + ‘”, “datafield”: “‘ + curMonth + ‘”, “width”: “72″, “cellsalign”: “right”, “align”: “right”, “cellsformat”: “n”, “aggregates”: [{ ‘ +
‘ function (aggregatedValue, currentValue, column, record) { ‘ +
‘ var total = currentValue; ‘ +
‘ return aggregatedValue + total; ‘ +
‘ } ‘ +
‘}]‘ + ‘}’;I am trying to include aggregate function for each column within its text property. Somehow this isnt working. Any clue how to do this.
Thanks, Vikas
Hi Vikas,
You can achieve this only with ‘aggregatesrenderer’ as it is shown in above example.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.