jQuery UI Widgets › Forums › Grid › Getting $ symbol in column and near to sum
Tagged: $, aggregates, aggregatesrenderer, angular grid, dollar, grid, jquery grid, jqxgrid, remove dollar, sum
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
i am trying to getting total of cloumn by using aggregate but i am getting $ symbol in column please see image.can any one tell me how to remove it
Hello veenahosur,
You can achieve this requirement using aggregatesrenderer. Here is an example that shows how (note the column “Price”):
<!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.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(200); var source = { localdata: data, datatype: "array", updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command commit(true); }, 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' } ] }; 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: 190, aggregatesrenderer: function (aggregates, column, element) { var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='float: left; width: 100%; height: 100%; '/>"; return renderstring; } }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 190, aggregatesrenderer: function (aggregates, column, element) { var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='float: left; width: 100%; height: 100%; '/>"; return renderstring; } }, { text: 'Product', datafield: 'productname', width: 170, aggregatesrenderer: function (aggregates, column, element) { var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='float: left; width: 100%; height: 100%; '/>"; return renderstring; } }, { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'], aggregatesrenderer: function (aggregates, column, element) { var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='float: left; width: 100%; height: 100%; '>"; $.each(aggregates, function (key, value) { var name = key == 'min' ? 'Min' : 'Max'; var color = key == 'max' ? 'green' : 'red'; renderstring += '<div style="color: ' + color + '; position: relative; margin: 6px; text-align: right; overflow: hidden;">' + name + ': ' + value + '</div>'; }); renderstring += "</div>"; return renderstring; } }, { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum'], aggregatesrenderer: function (aggregates, column, element, summaryData) { var numericValue = aggregates.sum.slice(1); var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='float: left; width: 100%; height: 100%;'>"; renderstring += '<div style="position: relative; margin: 6px; text-align: right; overflow: hidden;">Sum: ' + numericValue + '</div>'; renderstring += "</div>"; return renderstring; } } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.