Filter Items for Number Filter in Filter Row - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: bindingcomplete, equal, filter, filterable, greater than or equal, grid, jqxgrid, less than or equal, localizationobj, showfilterrow, updatefilterconditions

This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 9 years, 5 months ago.

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

Author

Filter Items for Number Filter in Filter Row Posts

May 1, 2015 at 9:43 am Filter Items for Number Filter in Filter Row #70522

aser

Participant

Hi, can I specify filter conditions in number filter, for example I need only three of them(EQUAL, LESS_THAN_OR_EQAL, GREATER_THAN_OR_EQAL)?

Thanks.

May 4, 2015 at 7:35 am Filter Items for Number Filter in Filter Row #70581

Nadezhda

Participant

Hello aser,

Please, find the following example which shows how to customize filter conditions. You can find more information about possible filter conditions in the following help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-filtering.htm.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/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="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(15);
            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").bind('bindingcomplete', function () {
                var localizationobj = {};
                filterstringcomparisonoperators = ['empty', 'not empty', 'contains', 'contains(match case)',
                        'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)',
                        'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null'];
                filternumericcomparisonoperators = ['equal', 'less than or equal', 'greater than or equal'];
                filterdatecomparisonoperators = ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'];
                filterbooleancomparisonoperators = ['equal', 'not equal'];

                localizationobj.filterstringcomparisonoperators = filterstringcomparisonoperators;
                localizationobj.filternumericcomparisonoperators = filternumericcomparisonoperators;
                localizationobj.filterdatecomparisonoperators = filterdatecomparisonoperators;
                localizationobj.filterbooleancomparisonoperators = filterbooleancomparisonoperators;

                // apply localization.
                $("#jqxgrid").jqxGrid('localizestrings', localizationobj);
            });

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                autoheight:true,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                updatefilterconditions: function (type, defaultconditions) {
                    var stringcomparisonoperators = ['EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE',
                    'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE',
                    'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL'];
                    var numericcomparisonoperators = ['EQUAL', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN_OR_EQUAL'];
                    var datecomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];
                    var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
                    switch (type) {
                        case 'stringfilter':
                            return stringcomparisonoperators;
                        case 'numericfilter':
                            return numericcomparisonoperators;
                        case 'datefilter':
                            return datecomparisonoperators;
                        case 'booleanfilter':
                            return booleancomparisonoperators;
                    }
                },
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
                  { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220 },
                  {
                      text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67,

                  },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number',  cellsalign: 'right' }
                ]
            });

            $("#jqxgrid").on("filter", function (event) {
            });

            $('#clearfilteringbutton').jqxButton({ height: 25});
            $('#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>

Best Regards,
Nadezhda

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

May 6, 2015 at 9:45 am Filter Items for Number Filter in Filter Row #70702

aser

Participant

Hi, it works, but there is two issues.
1. Can I reduce filter-box size? Box-Size

2. When the filter triggered, selected filter condition is always first in conditions list, no metter what I have choosen.

Thanks.

May 7, 2015 at 6:42 am Filter Items for Number Filter in Filter Row #70763

Nadezhda

Participant

Hi aser,

1)You can not reduce the filter-box size.
2)The above example works correctly on our side. Please, make sure you are using the latest version of jQWidgets(3.8.0).

You may try as alternative example the Filter Conditions demo.

Best Regards,
Nadezhda

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.