jQWidgets Forums

This topic contains 4 replies, has 3 voices, and was last updated by Jerry Penguin 8 years, 5 months ago.

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

Author

grid aggregates disappear when refreshing data Posts

April 3, 2014 at 1:25 pm grid aggregates disappear when refreshing data #52508

Participant

When I change the source of the grid and refresh it, the aggregates disappear.
How can I get the aggregates back after a refresh?

April 3, 2014 at 4:33 pm grid aggregates disappear when refreshing data #52526

yougotnet

Participant

Here is an example of code I created in jsfiddle that shows how the aggregates disappear and can’t get them back.

If you run it and then click Refresh Data, the aggregates go away.

 
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<button name="refreshData" id="refreshData">Refresh Data</button>

var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 700,
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     showstatusbar: true,
     showaggregates: true,
     sorttogglestates: 1,
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         columngroup: 'Name',
         width: 90
     }, {
         text: 'Last Name',
         columngroup: 'Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd-MMMM-yyyy'
     }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right',
         aggregates: ['sum'],
         aggregatesrenderer: function (aggregates) {
             var renderstring = '';
             $.each(aggregates, function (key, value) {
                 renderstring = value;
             });
             return '<div class=\"jqxSBCenter\">' + renderstring + '</div>';
		}         
     }, {
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2'
     }]
 });

$('#jqxgrid').on('bindingcomplete', function() {
    $('#jqxgrid').jqxGrid('refreshaggregates');
    $('#jqxgrid').jqxGrid('renderaggregates');    
});

$('#refreshData').jqxButton({
    width: 100,
    height: 30
    }).click(function() {
        var data1 = generatedata(10);
         var source1 = {
             localdata: data1,
             datafields: [{
                 name: 'firstname',
                 type: 'string'
             }, {
                 name: 'lastname',
                 type: 'string'
             }, {
                 name: 'productname',
                 type: 'string'
             }, {
                 name: 'date',
                 type: 'date'
             }, {
                 name: 'quantity',
                 type: 'number'
             }, {
                 name: 'price',
                 type: 'number'
             }],
             datatype: "array"
         };
        $('#jqxgrid').jqxGrid('source', source1);
    $('#jqxgrid').jqxGrid('refreshaggregates');
    $('#jqxgrid').jqxGrid('renderaggregates');
});

April 3, 2014 at 8:36 pm grid aggregates disappear when refreshing data #52537

Peter Stoev

Keymaster

Hi yougotnet,

jqxGrid’s source property should be set to an instance of jqxDataAdapter as it is demonstrated in our demos and help topics and as you did it for the initial data binding in this example. When you set the “source” property again, you should set it to an instance of jqxDataAdapter again, not to something else.

The solution is:

   var adapter = new $.jqx.dataAdapter(source1);
   $('#jqxgrid').jqxGrid('source', adapter);

Full demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to display aggregates in jqxGrid.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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.sort.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 () {
            var data = generatedata(500);
            var source = {
                localdata: data,
                datafields: [{
                    name: 'firstname',
                    type: 'string'
                }, {
                    name: 'lastname',
                    type: 'string'
                }, {
                    name: 'productname',
                    type: 'string'
                }, {
                    name: 'date',
                    type: 'date'
                }, {
                    name: 'quantity',
                    type: 'number'
                }, {
                    name: 'price',
                    type: 'number'
                }],
                datatype: "array"
            };

            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid({
                width: 700,
                theme: 'energyblue',
                source: adapter,
                sortable: true,
                showstatusbar: true,
                showaggregates: true,
                sorttogglestates: 1,
                columns: [{
                    text: 'First Name',
                    datafield: 'firstname',
                    columngroup: 'Name',
                    width: 90
                }, {
                    text: 'Last Name',
                    columngroup: 'Name',
                    datafield: 'lastname',
                    width: 90
                }, {
                    text: 'Product',
                    datafield: 'productname',
                    width: 170
                }, {
                    text: 'Order Date',
                    datafield: 'date',
                    width: 160,
                    cellsformat: 'dd-MMMM-yyyy'
                }, {
                    text: 'Quantity',
                    datafield: 'quantity',
                    width: 80,
                    cellsalign: 'right',
                    aggregates: ['sum'],
                    aggregatesrenderer: function (aggregates) {
                        var renderstring = '';
                        $.each(aggregates, function (key, value) {
                            renderstring = value;
                        });
                        return '<div class=\"jqxSBCenter\">' + renderstring + '</div>';
                    }
                }, {
                    text: 'Unit Price',
                    datafield: 'price',
                    cellsalign: 'right',
                    cellsformat: 'c2'
                }]
            });

            $('#jqxgrid').on('bindingcomplete', function () {
                $('#jqxgrid').jqxGrid('refreshaggregates');
                $('#jqxgrid').jqxGrid('renderaggregates');
            });

            $('#refreshData').jqxButton({
                width: 100,
                height: 30
            }).click(function () {
                var data1 = generatedata(10);
                var source1 = {
                    localdata: data1,
                    datafields: [{
                        name: 'firstname',
                        type: 'string'
                    }, {
                        name: 'lastname',
                        type: 'string'
                    }, {
                        name: 'productname',
                        type: 'string'
                    }, {
                        name: 'date',
                        type: 'date'
                    }, {
                        name: 'quantity',
                        type: 'number'
                    }, {
                        name: 'price',
                        type: 'number'
                    }],
                    datatype: "array"
                };
                var adapter = new $.jqx.dataAdapter(source1);
                $('#jqxgrid').jqxGrid('source', adapter);
                $('#jqxgrid').jqxGrid('refreshaggregates');
                $('#jqxgrid').jqxGrid('renderaggregates');
            });
        });
    </script>
</head>
<body class='default'>
  <div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<button name="refreshData" id="refreshData">Refresh Data</button>
</body>
</html>

Best Regards,
Peter Stoev

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

April 4, 2014 at 4:06 pm grid aggregates disappear when refreshing data #52574

yougotnet

Participant

Perfect, worked great.

November 9, 2016 at 10:38 am grid aggregates disappear when refreshing data #88874

Jerry Penguin

Participant

Great Tip …