jQWidgets Forums

Tagged: filter, filtertype, grid, jqxgrid, null, number

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

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

Author

Zero (0) in ‘number’ column equals null when filtering Posts

September 11, 2013 at 9:37 am Zero (0) in ‘number’ column equals null when filtering #28763

Artsem

Member

Hi,

I have the following code:

var source = {
datatype: “json”,
datafields: [
{ name: ‘Id’, type: ‘int’ },
{ name: ‘Column3’, type: ‘int’ }
],
id: ‘Id’,
url: ‘/api/Grid’,
type: ‘GET’
};

var dataSource = new $.jqx.dataAdapter(source, { async: true });

$(‘#jqxGrid’).jqxGrid({
width: ‘100%’,
theme: ‘web’,
autoheight: true,
source: dataSource,
pageable: true,
editable: false,
sortable: true,
filterable: true,
pagesizeoptions: [’10’, ’20’, ’50’],
selectionmode: ‘none’,
columns: [
{ text: “Column3”, datafield: “Column3”, columntype: ‘number’, filtertype: ‘number’ }
]
});

I obtain some rows from server, one of which has value for ‘Column3’ = 0 (zero, not null). But when I apply filter for ‘Column3’ (for example ‘less than’ 500 or ‘greater than -100’ ) rows filtered correctly except the row with ‘Column3’ = 0, it dissapears. But when I apply filter ‘null’ it’s shown.

Thank you,
Artsem

September 12, 2013 at 6:41 am Zero (0) in ‘number’ column equals null when filtering #28831

Dimitar

Participant

Hello Artsem,

Thank you for your feedback. This issue will be fixed in the next version of jQWidgets.

Best Regards,
Dimitar

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

November 1, 2013 at 3:58 pm Zero (0) in ‘number’ column equals null when filtering #31793

aneel.k

Member

Hi Dimitar,

We are running into the same issue after upgrading to 3.0.3 and 3.0.4.
Can you please let me know if this issue is fixed yet?

Thanks,
Aneel

November 1, 2013 at 4:14 pm Zero (0) in ‘number’ column equals null when filtering #31794

Peter Stoev

Keymaster

Hi guys,

I would like to add more info here. According to me there is no such behavior in ver. 3.0.4.

This sample proves that:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates the Grid filtering feature. Move the mouse cursor over a column header and click the dropdown button to open the filtering menu.
    </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/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.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.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);
            data[0].quantity = 0;
            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 addfilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = 'Beate';
                var filtercondition = 'contains';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtervalue = 'Andrew';
                filtercondition = 'starts_with';
                var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
 
                filtergroup.addfilter(filter_or_operator, filter1);
                filtergroup.addfilter(filter_or_operator, filter2);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            }
            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: adapter,
                filterable: true,
                sortable: true,
                ready: function () {
                    addfilter();
                },
                autoshowfiltericon: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 90 },
                  { text: 'Last 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' },
                  { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $('#events').jqxPanel({ width: 300, height: 80});
            $("#jqxgrid").on("filter", function (event) {
                $("#events").jqxPanel('clearcontent');
                var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
                var eventData = "Triggered 'filter' event";
                for (i = 0; i < filterinfo.length; i++) {
                    var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
                    $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                }
            });
            $('#clearfilteringbutton').jqxButton({ height: 25});
            $('#filterbackground').jqxCheckBox({ checked: true, height: 25});
            $('#filtericons').jqxCheckBox({ checked: false, height: 25});
            // clear the filtering.
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
            // show/hide filter background
            $('#filterbackground').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
            });
            // show/hide filter icons
            $('#filtericons').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div id="eventslog" style="margin-top: 30px;">
            <div style="width: 200px; float: left; margin-right: 10px;">
            <input value="Remove Filter" id="clearfilteringbutton" type="button" />
            <div style="margin-top: 10px;" id='filterbackground'>Filter Background</div>
            <div style="margin-top: 10px;" id='filtericons'>Show All Filter Icons</div>
            </div>
            <div style="float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Filtering by the Quantity column displays the 0 result correctly.

If you experience a different behavior in ver. 3.0.4, then please make sure that you updated everything correctly and also that you deleted your browser’s history. If you still experience something which seems to be not correct, then provide us a sample and we will test it.

Best Regards,
Peter Stoev

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.