jQWidgets Forums

Tagged: filter, filtering, grid, jqxgrid

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

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

Author

Filtering Grid at Runtime Through TextBox Posts

September 10, 2012 at 3:06 pm Filtering Grid at Runtime Through TextBox #7630

Member

Good morning all,

I need to be able to filter a grid by what a user types in a text box without pressing or clicking anything. When the first character is typed into the text box, the grid needs to refresh to display only rows that have the textbox value in any column. And if a second character is entered in the textbox then the grid is refreshed to display only the rows that have the two character value in the text box in again, any column, and so on and so on as the characters are entered into the textbox.

Do I use the grid’s filtering methods or do I not and do it some other code intensive way? What programming should I do to get this to work? Plain javascript? I’m new to web programming and the things you experienced web developers take for granted need to be told to me to undestand how to go about solving this problem. Please. Can someone please give me a road map with how to go about doing this if a code snippet isn’t available?

September 11, 2012 at 6:29 am Filtering Grid at Runtime Through TextBox #7652

Dimitar

Participant

Hello viperbyte,

Please check out the following demos:

This one shows a search toolbar:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/toolbar.htm?classic

This one shows another way of filtering:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customfiltering.htm?classic

This one has a find button:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/statusbar.htm?classic

Best Regards,
Dimitar

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

September 12, 2012 at 1:09 pm Filtering Grid at Runtime Through TextBox #7790

viperbyte

Member

I used a snippet of code from the third link you provided combined with the keyup event on the input box.
Super thanks Dimitar:)

September 12, 2012 at 2:29 pm Filtering Grid at Runtime Through TextBox #7802

viperbyte

Member

I now have a new problem. I was able to filter the grid by binding the keyup event in an input box name txtSearch with some code that I got from this site. It filters on the first column of the grid. The column’s name is Organization_Name. But the filtering must be able to look at all the columns of the grid. So i binded another column which is called “address_street” and it doesn’t work. I have exprimented with the value of filter_or_operator using a 1 or a 0 and that hasn’t helped. I don’t know if I’m going about this all wrong or if I’m just a little off, or if this can even be done at all. Can someone super please tell me if this can be done and if so, how should I go about doing this? The following is my attempt to get the filtering to apply to two columns: Organization_Name and address_street.

$(function () { $('#txtSearch') .bind('keyup', function (event) { //alert('Hello'); var datafield = "Organization_Name"; var searchText = $("#txtSearch").val(); var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = searchText; var filtercondition = 'contains'; var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter); $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup); // apply the filters. $("#jqxgrid").jqxGrid('applyfilters'); }) .bind('keyup', function (event) { //alert('Hello'); var datafield = "address_street"; var searchText = $("#txtSearch").val(); var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = searchText; var filtercondition = 'contains'; var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter); $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup); // apply the filters. $("#jqxgrid").jqxGrid('applyfilters'); }); });

September 13, 2012 at 5:59 am Filtering Grid at Runtime Through TextBox #7853

Dimitar

Participant

Hi viperbyte,

Here is another example, that shows filtering applied on two columns. Note that you should bind to the ‘keyup’ event only once.

<!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.1.min.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../demos/jqxgrid/generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                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');
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                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").bind("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').bind('change', function (event) {
                $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
            });
            // show/hide filter icons
            $('#filtericons').bind('change', function (event) {
                $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
            });
            $('#txtSearch').bind('keyup', function (event) {
                var searchText = $("#txtSearch").val();
                if (searchText.length > 0) {
                    var filtergroup = new $.jqx.filter();
                    var filtervalue = searchText;
                    var filtercondition = 'contains';
                    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                    var filter_or_operator = 1;
                    filtergroup.addfilter(filter_or_operator, filter);
                    $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
                    $("#jqxgrid").jqxGrid('addfilter', 'lastname', filtergroup);
                    // apply the filters.
                    $("#jqxgrid").jqxGrid('applyfilters');
                }
                else {
                    $("#jqxgrid").jqxGrid('clearfilters');
                }
            });
        });
    </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>
        Type text to filter first column:
        <input id="txtSearch" type="text" />
    </div>
</body>
</html>

On a side note, take a look at this guide to code formatting in this forum – Code Formatting.

Best Regards,
Dimitar

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

September 14, 2012 at 11:00 pm Filtering Grid at Runtime Through TextBox #7989

viperbyte

Member

Thanks Dimitar,

At least now I know how to filter on multiple columns like the way the code you showed me works. But what that code is doing doesn’t exactly do what I need. As-is what the code does is “ColumnA contains AND ColumnB contains”, what I need is “ColumnA contains OR ColumnB contains”. Do you or anyone know how I can get this type of result? Please.

Thanks,
Juan

September 17, 2012 at 5:39 am Filtering Grid at Runtime Through TextBox #8040

Dimitar

Participant

Hi Juan,

Here is an example that shows how to do this – by setting filtergroup.operator to ‘or’.

<!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.1.min.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../demos/jqxgrid/generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                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');
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                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").bind("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').bind('change', function (event) {
                $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
            });
            // show/hide filter icons
            $('#filtericons').bind('change', function (event) {
                $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
            });
            $('#txtSearch').bind('keyup', function (event) {
                var searchText = $("#txtSearch").val();
                if (searchText.length > 0) {
                    var filtergroup = new $.jqx.filter();
                    var filtervalue = searchText;
                    var filtercondition = 'contains';
                    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                    // used when there are multiple filters on a grid column:
                    var filter_or_operator = 1;
                    // used when there are multiple filters on the grid:
                    filtergroup.operator = 'or';
                    filtergroup.addfilter(filter_or_operator, filter);
                    $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
                    $("#jqxgrid").jqxGrid('addfilter', 'lastname', filtergroup);
                    // apply the filters.
                    $("#jqxgrid").jqxGrid('applyfilters');
                }
                else {
                    $("#jqxgrid").jqxGrid('clearfilters');
                }
            });
        });
    </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>
        Type text to filter first column:
        <input id="txtSearch" type="text" />
    </div>
</body>
</html>

Best Regards,
Dimitar

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

September 17, 2012 at 3:29 pm Filtering Grid at Runtime Through TextBox #8060

viperbyte

Member

Super thanks Dimitar. It works and I couldn’t be happier:)

Author

Posts

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

You must be logged in to reply to this topic.