jQWidgets Forums

Tagged: datefilter, filter, grid, jqxgrid

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

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

Author

Issues applying more than one filter Posts

April 3, 2013 at 8:01 am Issues applying more than one filter #18480

naatha

Member

Hello,

I have drop down list which contains different filters, filter1, filter2 …

And also i set

showfilterrow: true
filterable: true

When i select filter1 from the drop down list, i get 160 records out of 1500 records. Now i want to search for some one whose first name start with P with in the 160 records.

When i type P in the filter row (text box under the First Name column header), it over write the existing filter1 and use all the 1500 records instead of 160 records.

What i want is to keep the filter selected from the drop down list while applying other filter in the filter row.

Could you please help me to achieve this?

Thank you

April 3, 2013 at 9:45 am Issues applying more than one filter #18492

Dimitar

Participant

Hello naatha,

Please update to the latest version of jQWidgets (2.8) and share if you still experience the reported issue after that.

Best Regards,
Dimitar

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

April 3, 2013 at 12:05 pm Issues applying more than one filter #18503

naatha

Member

Hi Dimitar,

I have updated to latest version.

I am using the following function filter function:

var addfilter = function (columnname) {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
if (columnname == ”) return;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = ”;
var filtercondition = ‘not_empty’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
$(“#jqxgrid”).jqxGrid(‘addfilter’, columnname, filtergroup);
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}

when the column type is string, int works fine. But failed for date type.

Used to work fine with version 2.7.

Do i need to change anything?

Thanks

April 3, 2013 at 12:13 pm Issues applying more than one filter #18504

Dimitar

Participant

Hi naatha,

Could you please provide us with a larger code sample, including your source definition and your grid initialization? Remember to format your code as explained in the forum topic Code Formatting.

Best Regards,
Dimitar

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

April 3, 2013 at 12:20 pm Issues applying more than one filter #18505

naatha

Member

Hi Dimitar,

I have just found out –

when i set showfilterrow: false, it works.

when i set showfilterrow: true, get the following error message:

Unhandled exception at line 7, column 14438 in http://localhost:64535/jqwidgets/jqxgrid.filter.js

0x800a138f – JavaScript runtime error: Unable to get property ‘filtervalue’ of undefined or null reference

thanks

April 4, 2013 at 4:52 am Issues applying more than one filter #18568

naatha

Member

Hi Dimitar,

Here is the code sample.

When i select the Filter1 – Date, i am getting the error with v 2.8 (worked fine with v 2.7)

My real problem with v 2.7 is:

Say i have 10 empty values in Ship Date column out of 100 rows.

When i select the Filter1-Date, the grid only displays 90 rows where the date is non-empty.

After that when i use the filterrow to search some one, it overwrite the existing filter.

How can i avoid this?

Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'></title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />   
    <link rel="stylesheet" href="jqwidgets/styles/jqx.summer.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.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.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>   
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxdata.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="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsreorder.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script>  
    <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/jquery.global.js"></script>   
    <script type="text/javascript" src="jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxradiobutton.js"></script>    
    <script type="text/javascript" src="jqwidgets/jqxgrid.storage.js"></script>    
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="Scripts/generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "summer";
            var ddlsource = [
                    "Select a filter ...",
                    "Filter1 - Date",
                    "Filter2 - First Name",
                    "Filter3 - Quantity",                    
		        ];
            $("#jqxWidget1").jqxDropDownList({ source: ddlsource, selectedIndex: 0, width: '200', height: '25', theme: theme, openDelay: 500, closeDelay: 750, animationType: 'none', autoDropDownHeight: true });
            $('#jqxWidget1').on('select', function (event) {
                var args = event.args;
                if (args) {
                    var index = args.index;
                    if (index == 0) {
                        addfilter('');
                    }
                    else if (index == 1) {
                        addfilter('date');
                        $("#jqxgrid").jqxGrid('sortby', 'date', 'desc');                        
                    }
                    else if (index == 2) {
                        addfilter('firstname');
                        $("#jqxgrid").jqxGrid('sortby', 'firstname', 'desc');
                    }
                    else if (index == 3) {
                        addfilter('quantity');
                        $("#jqxgrid").jqxGrid('sortby', 'quantity', 'desc');
                    }                    
                }
            });
            var addfilter = function (columnname) {
                $("#jqxgrid").jqxGrid('clearfilters');
                if (columnname == '') return;
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = '';
                var filtercondition = 'not_empty';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter1);
                $("#jqxgrid").jqxGrid('addfilter', columnname, filtergroup);
                $("#jqxgrid").jqxGrid('applyfilters');
            }
            
            // prepare the data
            var data = generatedata(100);
            var source =
            {
                localdata: data,
                datatype: "array",
                cache: false,
                datafields:
                [
                    { name: 'id', type: 'number' },
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date', format: 'dd/MM/yyyy' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: '1000',
                source: dataAdapter,
                theme: theme,
                selectionmode: 'singlerow',
                sortable: true,
                showfilterrow: true,
                sorttogglestates: 2,
                filterable: true,
                altrows: true,
                pageable: true,
                autoheight: true,
                columnsresize: true,
                autoshowfiltericon: true,
                showsortmenuitems: false,
                columnsresize: true,
                columnsreorder: false,
                pagesizeoptions: ['5', '10', '15', '20', '25'],
                enabletooltips: true,                      
                showstatusbar: true,
                columns: [
                  { text: 'ID', datafield: 'id', width: 50, cellsalign: 'center', align: 'center' },
                  { text: 'First Name', datafield: 'firstname', width: 150, cellsalign: 'center', align: 'center', filtercondition: 'starts_with' },
                  { text: 'Last Name', datafield: 'lastname', width: 150, cellsalign: 'center', align: 'center', filtercondition: 'starts_with' },
                  { text: 'Product', datafield: 'productname', width: 200, cellsalign: 'center', align: 'center', filtercondition: 'starts_with' },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 100, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 150, cellsalign: 'center', align: 'center', cellsformat: 'yyyy-MM-dd', filtertype: 'date' },
                  { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'center', align: 'center' },
                  { text: 'Price', datafield: 'price', width: 100, cellsalign: 'center', align: 'center', cellsformat: 'c2' }
                ]
            });            
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget1' style="float: left; margin-left: 75px; margin-right: 25px; margin-top: 30px; margin-bottom: 30px">                
    </div>    
    <div id='jqxWidget' style="margin-left: 75px; margin-bottom: 30px; margin-top: 30px">
        <div id="jqxgrid"></div>
    </div>       
</body>
</html>

April 4, 2013 at 10:37 am Issues applying more than one filter #18591

Dimitar

Participant

Hi naatha,

Here is a working example, using version 2.8:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.storage.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../../demos/jqxgrid/generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "summer";
            var ddlsource = [
                    "Select a filter ...",
                    "Filter1 - Date",
                    "Filter2 - First Name",
                    "Filter3 - Quantity",
		        ];
            $("#jqxWidget1").jqxDropDownList({ source: ddlsource, selectedIndex: 0, width: '200', height: '25', theme: theme, openDelay: 500, closeDelay: 750, animationType: 'none', autoDropDownHeight: true });
            $('#jqxWidget1').on('select', function (event) {
                var args = event.args;
                if (args) {
                    var index = args.index;
                    if (index == 0) {
                        addfilter('');
                    }
                    else if (index == 1) {
                        addfilter('date');
                        $("#jqxgrid").jqxGrid('sortby', 'date', 'desc');
                    }
                    else if (index == 2) {
                        addfilter('firstname');
                        $("#jqxgrid").jqxGrid('sortby', 'firstname', 'desc');
                    }
                    else if (index == 3) {
                        addfilter('quantity');
                        $("#jqxgrid").jqxGrid('sortby', 'quantity', 'desc');
                    }
                }
            });
            var addfilter = function (columnname) {
                $("#jqxgrid").jqxGrid('clearfilters');
                if (columnname == '') {
                    return;
                } else if (columnname == "date") {
                    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var d1 = new Date(2013, 06, 01);
                    var filtervalue1 = d1;
                    var filtercondition1 = 'less_than';
                    var filter1 = filtergroup.createfilter('datefilter', filtervalue1, filtercondition1);
                    var d2 = new Date(2013, 01, 01);
                    var filtervalue2 = d2;
                    var filtercondition2 = 'greater_than';
                    var filter2 = filtergroup.createfilter('datefilter', filtervalue2, filtercondition2);
                    filtergroup.addfilter(filter_or_operator, filter1);
                    filtergroup.addfilter(filter_or_operator, filter2);
                    $("#jqxgrid").jqxGrid('addfilter', columnname, filtergroup);
                    $("#jqxgrid").jqxGrid('applyfilters');
                } else if (columnname == "firstname" || columnname == "quantity") {
                    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var filtervalue = '';
                    var filtercondition = 'not_empty';
                    var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                    filtergroup.addfilter(filter_or_operator, filter1);
                    $("#jqxgrid").jqxGrid('addfilter', columnname, filtergroup);
                    $("#jqxgrid").jqxGrid('applyfilters');
                };
            }
            // prepare the data
            var data = generatedata(100);
            var source =
            {
                localdata: data,
                datatype: "array",
                cache: false,
                datafields:
                [
                    { name: 'id', type: 'number' },
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date', format: 'dd/MM/yyyy' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: '1000',
                source: dataAdapter,
                theme: theme,
                selectionmode: 'singlerow',
                sortable: true,
                showfilterrow: true,
                sorttogglestates: 2,
                filterable: true,
                altrows: true,
                pageable: true,
                autoheight: true,
                columnsresize: true,
                autoshowfiltericon: true,
                showsortmenuitems: false,
                columnsresize: true,
                columnsreorder: false,
                pagesizeoptions: ['5', '10', '15', '20', '25'],
                enabletooltips: true,
                showstatusbar: true,
                columns: [
                  { text: 'ID', datafield: 'id', width: 50, cellsalign: 'center', align: 'center' },
                  { text: 'First Name', datafield: 'firstname', width: 150, cellsalign: 'center', align: 'center', filtercondition: 'starts_with' },
                  { text: 'Last Name', datafield: 'lastname', width: 150, cellsalign: 'center', align: 'center', filtercondition: 'starts_with' },
                  { text: 'Product', datafield: 'productname', width: 200, cellsalign: 'center', align: 'center', filtercondition: 'starts_with' },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 100, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 150, cellsalign: 'center', align: 'center', cellsformat: 'yyyy-MM-dd' },
                  { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'center', align: 'center' },
                  { text: 'Price', datafield: 'price', width: 100, cellsalign: 'center', align: 'center', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget1' style="float: left; margin-left: 75px; margin-right: 25px; margin-top: 30px;
        margin-bottom: 30px">
    </div>
    <div id='jqxWidget' style="margin-left: 75px; margin-bottom: 30px; margin-top: 30px">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

April 4, 2013 at 12:18 pm Issues applying more than one filter #18598

naatha

Member

Thanks Dimitar and it works fine.

Author

Posts

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

You must be logged in to reply to this topic.