jQWidgets Forums

Tagged: column, columntype, custom, filter, filtering, grid, jqxgrid, multiple, or, search field

This topic contains 7 replies, has 3 voices, and was last updated by Dimitar 8 years, 2 months ago.

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

Author

Filter grid in more than one column Posts

January 16, 2014 at 6:38 pm Filter grid in more than one column #47969

Participant

If there is a way to use to use filters in more than one column? I have a text field and I have two columns (name, lastname) and I want when I enter John the filter check both column. So far I can see, it works only with one column.
What can I do?

January 17, 2014 at 8:32 am Filter grid in more than one column #47992

Dimitar

Participant

Hello faiverson,

Here how to achieve this by using a custom filtering function (addfilter):

<!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.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);
            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 (input) {
                var filtergroup = new $.jqx.filter();

                var filter_or_operator = 1;
                var filtervalue = input;
                var filtercondition = 'contains';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

                filtergroup.addfilter(filter_or_operator, filter1);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
                $("#jqxgrid").jqxGrid('addfilter', 'lastname', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            }
            var adapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: adapter,
                filterable: true,
                sortable: true,
                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 });
            });

            $("#filter").click(function () {
                var input = $("#filterInput").val();
                addfilter(input);
            });
        });
    </script>
</head>
<body class='default'>
    <input type="text" id="filterInput" />
    <button id="filter">
        Filter</button>
    <br />
    <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>

January 30, 2014 at 11:37 pm Filter grid in more than one column #48715

faiverson

Participant

Ok, thanks but he example seems that doesn’t work.

Also I can’t do a OR (filter_or_operator = 1), it’s always AND

January 30, 2014 at 11:47 pm Filter grid in more than one column #48716

faiverson

Participant

Explain this better: Your proposal is for find ‘Joe’ in both columns, so if Joe doesn’t appear in firstname AND lastname fails.

I need to do a logic OR but between columns, so instead of make firstname AND lastname, I want to do firstname OR lastname

January 31, 2014 at 12:08 am Filter grid in more than one column #48717

faiverson

Participant

A solution would be:
$(“#jqxgrid”).jqxGrid(‘addfilter’, [‘firstname’, ‘lastname’], filtergroup);

But, obviusly, [‘firstname’, ‘lastname’] doesn’t work, it’s just to explain my point.

What can I do to resolve this?

January 31, 2014 at 7:59 am Filter grid in more than one column #48724

Dimitar

Participant

Hi faiverson,

The filter_or_operator applies to filters in a filtergroup, not to filters, applied to different columns. Unfortunately, the grid does not support the “or” multi-columng filtering, but the new jqxTreeGrid and jqxDataTable support them. Please check out the demos Search Field for both tree grid and data table.

Best Regards,
Dimitar

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

January 9, 2017 at 8:35 pm Filter grid in more than one column #90429

VitaliyST

Participant

I need the same functionality, I tried to use Data table instead, but it doesn’t have selectionmode ‘checkbox’.

January 10, 2017 at 6:10 am Filter grid in more than one column #90441

Dimitar

Participant

Hi VitaliyST,

You can create a custom functionality for jqxDataTable that resembles jqxGrid’s selectionmode: 'checkbox'. Note the columnType property of data table columns. In your case, you should set a column’s columnType to ‘template’. Here is what the jqxDataTable API documentation states about it:

“template” – sets a custom editor as a default editor for the column. The editor should be created in the createEditor callback function. The editor should be synchronized with the cell’s value in the initEditor callback. The editor’s value should be retrieved in the getEditorValue callback function.

Once this is set up, you can bind to the widget’s cellEndEdit event and call selectRow and unselectRow in order to change the selection of rows based on the state of your column template/checkbox widget.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.