jQWidgets Forums

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

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

Author

Sum/Count Aggregate not working after filter Posts
April 4, 2013 at 9:08 pm Sum/Count Aggregate not working after filter #18628

assaf.frank123
Participant

Hi,

I filter the grid using any type of column filter and the sum and count aggregates are not shown correctly.

I am using version 2.8.
I have in my code the next section –

$(“#jqxgrid”).on(“filter”, function (event)
{
alert();
$(‘#jqxgrid’).jqxGrid(‘refreshaggregates’);
});

I have 2 grids – the first allows editing and the second does not:
1. The first one always shows the first aggregated value. Filtering alone does not change the aggregates. The values are
changed propely right after the filter I edit a certain cell. The method is not executed.
2. The second non editable grid – the method is executed. after the alert the value of the aggregates is shown correct but this changes
immidiatly once the code continues (this did so also without the method – after the filter took affect you can see the value is show properly
for a split second and then changes quickly back to the original.

Thanks.

April 4, 2013 at 9:21 pm Sum/Count Aggregate not working after filter #18630
Peter Stoev
Keymaster
Hi,

Please, post a sample which demonstrates your issue with jQWidgets 2.8.

Below is a working sample:
```
<!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.8.3.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.filter.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/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date'},
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                showfilterrow: true,
                showaggregates: true,
                showstatusbar: true,
                filterable: true,
                theme: theme,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 115 },
                  {
                      text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
                  },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number',  cellsalign: 'right', aggregates: ['sum'] }
                ]
            });
            $('#clearfilteringbutton').jqxButton({ height: 25, theme: theme });
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton" type="button" />
</body>
</html>
```
The Quantity column in the above code has aggregate. When a filter is applied, the aggregate is recalculated as expected.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
April 6, 2013 at 6:08 pm Sum/Count Aggregate not working after filter #18716

assaf.frank123
Participant

Your example works good.
Mine for some reason does not..
I initialize the grid by JS data array (myData). The main code elements in the file –

* imports –

* JS init of grid

$(document).ready(function () {
var theme = getDemoTheme();
var data = myData;

var source =
{
localdata: data,
datafields:
[
{ name: ‘id’, type: ‘string’},
{ name: ‘ind’, type: ‘string’},
{ name: ‘name’, type: ‘string’ },
{ name: ‘date’, type: ‘date’,format: ‘dd/MM/yyyy HH:mm’},
{ name: ‘phone’, type: ‘string’ },
{ name: ‘kw’, type: ‘string’ },
{ name: ‘lp’, type: ‘string’ },
{ name: ‘ad’, type: ‘string’ },
{ name: ‘deal’, type: ‘string’},
{ name: ‘cremarks’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘followupdate’, type: ‘date’, format: ‘dd/MM/yyyy’},
{ name: ‘remarks’, type: ‘string’ }
],
datatype: “array”
};
var linkrenderer = function (row, column, value) {
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}

var html = ‘<a target="_blank" href="MyServlet?vid=&pid=&tid=’+value+'”>’+value+”;
return html;
};

var dataAdapter = new $.jqx.dataAdapter(source);
// new leads grid
$(“#jqxgrid”).jqxGrid(
{
height: 430,
width: ‘100%’,
source: dataAdapter,
showfilterrow: true,
filterable: true,
theme: theme,
selectionmode: ‘singlecell’,
editable: false,
showstatusbar: true,
showtoolbar: true,
statusbarheight: 45,
enabletooltips: true,
columnsresize: true,
showaggregates: true,
sortable: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“Leads sent to ”“);

toolbar.append(container);
},
columns: [
{ text: ‘Date’,pinned: true, align:’left’ ,datafield: ‘date’, filtertype: ‘date’, width: 150, cellsalign: ‘left’,
cellsformat: ‘dd/MM/yyyy HH:mm’,aggregates: [‘count’]},
{ text: ‘Keyword’,pinned: true,align:’left’ , columntype: ‘textbox’, filtertype: ‘checkedlist’,cellsalign: ‘left’,datafield: ‘kw’,
width: 120},
{ text: ‘Ad’,pinned: true,align:’left’ , columntype: ‘textbox’, filtertype: ‘checkedlist’,cellsalign: ‘left’,datafield: ‘ad’, width:
120},
{ text: ‘Page’,pinned: true,align:’left’ , columntype: ‘textbox’, filtertype: ‘checkedlist’,cellsalign: ‘left’, datafield: ‘lp’,
width:120,cellsrenderer: linkrenderer },
{ text: ‘Deal’,pinned: true,align:’left’ , columntype: ‘textbox’, filtertype: ‘checkedlist’,cellsalign: ‘left’, datafield: ‘deal’,
width: 120},
{ text: ‘Deal Amount’,pinned: true, align:’left’ , datafield: ‘quantity’, filtertype: ‘number’, cellsalign: ‘left’,width:
100 ,columntype:’numberinput’,aggregates: [‘sum’, ‘avg’]},
{ text: ‘Followup Date’, align:’left’ ,datafield: ‘followupdate’, filtertype: ‘date’, columntype: ‘datetimeinput’,width: 150,
cellsalign: ‘left’, cellsformat: ‘dd/MM/yyyy’ },
{ text: ‘Account Remarks’,align:’left’ , columntype: ‘textbox’, filtertype: ‘textbox’,cellsalign: ‘left’, filtercondition: ‘contains’,
datafield: ‘remarks’, width:200},
{ text: ‘Name’,align:’left’ , columntype: ‘textbox’, filtertype: ‘textbox’,cellsalign: ‘left’, filtercondition: ‘contains’,
datafield: ‘name’, width: 150},
{ text: ‘Phone’,align:’left’ , columntype: ‘textbox’, filtertype: ‘textbox’,cellsalign: ‘left’, filtercondition: ‘contains’,
datafield: ‘phone’, width: 150},
{ text: ‘Lead Remarks’,align:’left’ , columntype: ‘textbox’, filtertype: ‘textbox’,cellsalign: ‘left’, filtercondition: ‘contains’,
datafield: ‘cremarks’, width: 200},
{ text: ‘id’, align:’right’ ,datafield: ‘id’}
]

});

$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘id’);
$(“#jqxgrid”).on(“filter”, function (event)
{
$(‘#jqxgrid’).jqxGrid(‘refreshaggregates’);
});

});

I added the on “filter” function to try and solve the issue but also without it the problem stil occurs – upon change of filter the aggtegates changes for a split second and then jumps back to the original value (un filtered).

Thanks.

April 6, 2013 at 6:40 pm Sum/Count Aggregate not working after filter #18717

assaf.frank123
Participant

I found the issue –

for some reason my id column (that I hide later on)

{ text: ‘id’, datafield: ‘id’}

caused the problem with the aggregates (I also see the the filter list open a slight slower when the id column is in the grid).

Once I add all the attributes –

{ text: ‘id’, align:’left’ , columntype: ‘textbox’, filtertype: ‘textbox’,cellsalign: ‘left’, filtercondition: ‘contains’, datafield: ‘id’, width: 200}\\

all works smoothly.

Thanks.
Author

Posts

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

You must be logged in to reply to this topic.