jQuery UI Widgets Forums Grid Getting $ symbol in column and near to 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

  • veenahosur
    Participant

    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


    Dimitar
    Participant

    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,
    Dimitar

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.