jQWidgets Forums

Tagged: grid filtering

This topic contains 6 replies, has 5 voices, and was last updated by Todor 5 years, 9 months ago.

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

Author

Multiple custom filters Posts

May 22, 2013 at 8:22 am Multiple custom filters #21609

davijeb

Blocked

Hi,

I’m using the jqxgrid and will be looking to buy an Enterprise license shortly for a financial house in London.

One of the requirements we have is to apply multiple custom filters to a column. At present it appears you can only add one.

How difficult would it be to add a “+” button that would add a new sort criteria or would it be possible to add more filters together?

Thanks,

Jeremy

May 22, 2013 at 10:03 am Multiple custom filters #21629

Peter Stoev

Keymaster

Hi Jeremy,

To apply multiple Filters, you may use the Grid’s API. In the sample below, a Filter Group of 2 filters is created and applied to the First Column. However, you can add as many filters to a filter group as you wish.

Example:

<!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.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.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/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: '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,
                theme: theme,
                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, theme: theme });
            $("#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, theme: theme });
            $('#filterbackground').jqxCheckBox({ checked: true, height: 25, theme: theme });
            $('#filtericons').jqxCheckBox({ checked: false, height: 25, theme: theme });
            // 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>

I also suggest you to look at this help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-filtering.htm

Best Regards,
Peter Stoev

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

May 22, 2013 at 10:55 am Multiple custom filters #21643

davijeb

Blocked

Thanks but what I mean is can we have multiple chained custom filters. So, apply a filter then have the ability to add a new:

Show rows where:

X AND Y

Show rows where:

A OR B

etc.

Or, failing that, could we apply multiple filters that build on each other. In other words changing the filter will not overwrite the underlying data filter if one is applied already.

It’s harder to describe than it actually is…

May 22, 2013 at 12:04 pm Multiple custom filters #21647

Peter Stoev

Keymaster

Hi,

Unfortunately, it is not possible to add more than 2 filters per a column through the UI. That is possible only through the API. However, you should keep in mind that setting a filter through the UI will remove the filters set through the API.

Best Regards,
Peter Stoev

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

June 30, 2017 at 6:16 am Multiple custom filters #94625

dan123

Participant

Nice

July 10, 2019 at 3:32 pm Multiple custom filters #106028

mr_kirkwood

Participant

At some point in the future will there be the ability to add more than two filters to a column and maybe use wildcards?

July 11, 2019 at 9:41 am Multiple custom filters #106040

Todor

Participant

Hello mr_kirkwood,

You could check our Roadmap for future plans and features.
The other option is to pay for custom development for a specific feature.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.