jQuery UI Widgets Forums Grid Filter grid in more than one column

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Filter grid in more than one column #47969

    faiverson
    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?

    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>
    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

    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

    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?

    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/

    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’.

    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/

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

You must be logged in to reply to this topic.