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 4 years ago.

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


    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


    Hello faiverson,

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

    <!DOCTYPE html>
    <html lang="en">
        <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,
                        { 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.
                var adapter = new $.jqx.dataAdapter(source);
                    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) {
                    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 () {
                // 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();
    <body class='default'>
        <input type="text" id="filterInput" />
        <button id="filter">
        <br />
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            <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 style="float: left;">
                    Event Log:
                    <div style="border: none;" id="events">
    Filter grid in more than one column #48715


    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


    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


    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


    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,

    jQWidgets team

    Filter grid in more than one column #90429


    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


    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,

    jQWidgets team

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

You must be logged in to reply to this topic.