jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Custom Aggregate

Tagged: , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 12 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Custom Aggregate Posts
  • October 3, 2012 at 5:23 pm Custom Aggregate #8872

    Antony
    Member

    How can I right-align the custom aggregate value? Please help.

    October 4, 2012 at 6:17 am Custom Aggregate #8902

    Dimitar
    Participant

    Hello Antony,

    Here is an example with right-aligned aggregate:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In this sample is demonstrated how to display custom aggregates
            in jqxGrid.</title>
        <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
            type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.aggregates.js"></script>
        <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../demos/jqxgrid/generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                // prepare the data
                var data = generatedata(200);
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    updaterow: function (rowid, rowdata) {
                        // synchronize with the server - send update command   
                    }
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: dataAdapter,
                    theme: theme,
                    showstatusbar: true,
                    statusbarheight: 25,
                    altrows: true,
                    showaggregates: true,
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
                      { text: 'Product', datafield: 'productname', width: 170 },
                      { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right', cellsformat: 'n2' },
                      { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: [{ 'Total':
                                function (aggregatedValue, currentValue, column, record) {
                                    var total = currentValue * parseInt(record['quantity']);
                                    return aggregatedValue + total;
                                }
                      }], aggregatesrenderer: function (aggregates) {
                          var value = aggregates['Total'];
                          var renderstring = '<div style="float: right; margin: 4px; overflow: hidden;">' + "Total" + ': ' + value + '</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/

    October 4, 2012 at 8:05 am Custom Aggregate #8903

    Antony
    Member

    Hi Dimitar,

    Thank you very much for the answer.

    Can you also please let me know how I can give the same formatting as that of the column to the aggregate value.
    Also please help me to get the group aggregates. Currently I see only count for groups.

    Thanks and regards
    Antony

    October 4, 2012 at 8:56 am Custom Aggregate #8905

    Dimitar
    Participant

    Hi Antony,

    You can use the aggregatesrenderer to make an aggregates formatting similar to that of ordinary column cells, whose formatting is defined by cellsrenderer.

    Group aggregates are not available in jqxGrid. However, you can change the header of the group using the groupsrenderer property.

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.