jQWidgets Forums

Tagged: datagrid aggregates

This topic contains 6 replies, has 3 voices, and was last updated by Peter Stoev 11 years ago.

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

Author

aggregates does not work after ‘clear’ and ‘addRow’ Posts

November 11, 2013 at 4:38 pm aggregates does not work after ‘clear’ and ‘addRow’ #32409

jahnvi25

Participant

i have gird displaying aggregates just fine.. but after following code

$(‘#jqxGrid’).jqxGrid(‘clear’);
$(‘#jqxGrid’).jqxGrid(‘addrow’, null, newRows);

it shows statusbar.. but no aggregates on that one.. how can i force to re-calculate and load the aggregates.. ?

Thanks

November 11, 2013 at 5:17 pm aggregates does not work after ‘clear’ and ‘addRow’ #32411

Peter Stoev

Keymaster

Hi jahnvi25,

Could you please post a more complete sample?

In general, “refreshaggregates” updates the aggregates.

$('#jqxGrid').jqxGrid('refreshaggregates');

If you want to completely re-render the aggregates, use “renderaggregates”.

$('#jqxGrid').jqxGrid('renderaggregates');

Best Regards,
Peter Stoev

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

November 12, 2013 at 6:29 pm aggregates does not work after ‘clear’ and ‘addRow’ #32520

jahnvi25

Participant

here is the example.. click on “load new data”.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="assets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var tempData = new Array();
            var data = new Object();
            data.id = "row1";
            data.header = "Angel";
            data.action = "Buy";
            data.price = 2.3;
            tempData.push(data);
            //second row
            data = new Object();
            data.id="row2";
            data.header = "Miriam";
            data.action = "Sell";
            data.price = 4.5;
            tempData.push(data);
            
            //var data = [{ id: "row1", firstname: "Angel", lastname: "Bradley" }, { id: "row2", firstname: "Miriam", lastname: "Roche"}];
            var source =
            {
                datatype: "array",//"json",
                id: "id",
                localdata:tempData,
                datafields: [
                    {name: 'header', type: 'string'},
                    {name: 'action', type: 'string'},
                    {name : 'price',type:'number'}
                ]
            };
            
            var columns = [
             {text:'Header',datafield:'header',hidden:false,editable:false,sortable:false},
             {text:'Action',datafield:'action',hidden:false,editable:true,sortable:false},
             {text:'Price',datafield:'price',hidden:false,editable:true,sortable:false,
                 aggregates: [{'Net ':
                function (aggregatedValue, currentValue, column, record) {
                    var total;
                    if(record['action'] == 'Buy')
                        total = currentValue * 1;
                    else if(record['action'] == 'Sell')
                        total = currentValue * (-1);
                    return aggregatedValue + total;
                }
              }],aggregatesrenderer:function (aggregates, column, element) {
                    var renderstring = "<div class='jqx-widget-content jqx-widget-content-basic"  + "' style='float: left; width: 100%; height: 100%; '>";
                    $.each(aggregates, function (key, value) {
                        var val = value;
                        if(val)
                            val = (val * 1).toFixed(2);
                        renderstring += '<div style="position: relative; text-align: right; overflow: hidden;">' + key + ': ' + val + '</div>'; 
                    });
                    renderstring += "</div>";
                    return renderstring;
              }
              }
            ];
            var dataAdapter = new $.jqx.dataAdapter(source);
            
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                width: 400,
                autoheight: true,
                sortable: false,
                columns: columns,
                editable: false,
                filterable:true,
                showaggregates: true,
                showstatusbar: true,
                statusbarheight: 20,
                altrows: true
                //groupable: true
            });
            
            $('#jqxgrid').on('cellendedit', function (event) {
                var args = event.args;
                var row = args.rowindex;
                var id = $('#jqxgrid').jqxGrid('getrowid', row);
                alert(id);
            });
            $("#BtnDiv").on('click','#btnSnap2',function(){
                var rows = $('#jqxgrid').jqxGrid('getrows');
                $('#jqxgrid').jqxGrid('clear');
                $('#jqxgrid').jqxGrid('addrow', null, rows);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div id="BtnDiv">
            <input type="button" id="btnSnap2" value="load new Data">
        </div>
    </div>
</body>
</html>

November 12, 2013 at 6:33 pm aggregates does not work after ‘clear’ and ‘addRow’ #32521

jahnvi25

Participant

even if you generate new data like below.. still does not work

$("#BtnDiv").on('click','#btnSnap2',function(){
                //var rows = $('#jqxgrid').jqxGrid('getrows');
                var tempData = new Array();
                var data = new Object();
                data.id = "row1";
                data.header = "new name";
                data.action = "Buy";
                data.price = 2.67;
                tempData.push(data);
                $('#jqxgrid').jqxGrid('clear');
                $('#jqxgrid').jqxGrid('addrow', null, tempData);
            });

November 15, 2013 at 5:39 pm aggregates does not work after ‘clear’ and ‘addRow’ #32730

jahnvi25

Participant

anything ? how can i fix this ?

March 6, 2014 at 4:27 pm aggregates does not work after ‘clear’ and ‘addRow’ #50619

lleveille

Participant

Same issue … aggregates do not work when I have an empty grid and I add rows using ‘addRow’.
Once I save and the grid has atleast one row to start with the aggregates start working.

March 6, 2014 at 5:46 pm aggregates does not work after ‘clear’ and ‘addRow’ #50621

Peter Stoev

Keymaster

Hi lleveille,

Aggregates would not be recalculated automatically if you add/remove row. That is why there’s a method in jqxGrid which is called $(‘#jqxgrid’).jqxGrid(‘refreshaggregates’);

Best Regards,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.