jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Empty Cell Filtering
Tagged: filtering issue
This topic contains 8 replies, has 2 voices, and was last updated by Peter Stoev 13 years ago.
-
AuthorEmpty Cell Filtering Posts
-
I have a grid like so:
<table><tr><td>Name</td><td>Division</td><td>Supervisor</td></tr><tr><td>Bob</td><td></td><td></td</tr><tr><td>Alice</td><td></td><td>Jane</td></tr></table>
The Division and Supervisor columns may or may not contain data. If the first row in the table has a blank value in Supervisor, the filter dropdown will not have the string filtering options (ie. contains, empty etc). It will only have the numeric filtering options (ie. less than, greater than etc). If I sort the grid, and the first row now contains data in the Supervisor column (ie. Jane), the filtering options will be the string versions.
I have manually set the type in the grid source to string for all the columns. This appears to be a bug where the filter options are determined by the contents of the first cell in that column, instead of looking at the source or the contents of other rows.
I’m working on setting up a fiddle example, but it would be easier w/ a base to start from.
Thank you for the feedback. We already had this reported in the Forum, but will investigate your scenario with the exact data, too. Have you tried setting the ‘type’ of the datafields to ‘string’, ‘number’ or ‘date’?
Best Regards,
Peter StoevjQWidgets team
http://www.jqwidgets.comAs I noted in my post, I have tried setting the type on the datafields, and it didnt have any effect.
As an aside, having search functionality for the forums would be very handy. I wanted to check if the issue had previously been reported, but I wasn’t going to manually check through each thread.
To Search, you can do this:
1. Login into your account
2. Click Dashboard
3. Click Topics
4. Write in the search field and click Search TopicsBest Regards,
Peter StoevjQWidgets team
http://www.jqwidgets.comThanks again for your help Peter, being able to search will be very useful.
Do you have any further information on the status of this bug? It is affecting all of our grids and is very frustrating.
If you are using the latest version and still reproduce the reported behavior, then I suppose that you missed to specify the type of your columns.
Here’s a working example:
<!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.7.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="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = new Array(); var firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" ]; var lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" ]; var productNames = [ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" ]; var priceValues = [ "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0" ]; for (var i = 0; i < 200; i++) { var row = {}; var productindex = Math.floor(Math.random() * productNames.length); var price = parseFloat(priceValues[productindex]); var quantity = 1 + Math.round(Math.random() * 10); if (i > 0) { row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity; } data[i] = row; } var source = { localdata: data, datafields: [ {name: 'firstname'}, {name: 'lastname'}, {name: 'productname'}, {name: 'price', type: 'number'}, {name: 'quantity', type: 'number'} ], datatype: "array" }; $("#jqxgrid").jqxGrid( { width: 670, source: source, filterable: true, sortable: true, autoshowfiltericon: true, columns: [ { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' } ] }); }); </script></head><body class='default'> <div id="jqxgrid"> </div></body></html>
Best Regards,
Peter StoevjQWidgets team
http://www.jqwidgets.comPlease read the thread before you reply. As I stated in my first post, and in a reply to you earlier this month, I HAVE set the type of my columns. I am using the latest version, and I can still reproduce this behaviour when the first row is empty.
Additionally, I’m not sure how the example you posted is supposed to prove that the bug no longer exists, since you have data in every row. As stated initially, and again in this response – the behaviour only occurs if the cell in the first row is empty.
Finally, as with my previous posts, we are loading data from XML, not from an array. I have provided XML and my grid source code below so you can replicate the issue. Sorting either the Employee ID column, or any of the date columns to have an empty value in the first row, and then attempting to filter will only provide the string filtering options, instead of the number or date options.
XML:
<LearnerReport> <Learner><UserID>1068645</UserID><LearnerName>user, test_10</LearnerName><CourseName>Exam Automation</CourseName><DateAssigned>23/07/2012</DateAssigned><DateStarted/><DateCompleted/> <EmployeeID/></Learner><Learner><UserID>1068646</UserID><LearnerName>user, test_11</LearnerName><CourseName>Test Course</CourseName><DateAssigned>23/07/2012</DateAssigned><DateStarted>23/07/2012</DateStarted><DateCompleted/> <EmployeeID/></Learner><Learner><UserID>1068647</UserID><LearnerName>user, test_12</LearnerName><CourseName>Test Course</CourseName><DateAssigned>23/07/2012</DateAssigned><DateStarted>26/07/2012</DateStarted><DateCompleted/> <EmployeeID/></Learner><Learner><UserID>1068648</UserID><LearnerName>user, test_13</LearnerName><CourseName>Test Course</CourseName><DateAssigned>23/07/2012</DateAssigned><DateStarted/><DateCompleted/> <EmployeeID/></Learner><Learner><UserID>1068649</UserID><LearnerName>user, test_14</LearnerName><CourseName>Test Course</CourseName><DateAssigned>23/07/2012</DateAssigned><DateStarted/><DateCompleted/> <EmployeeID/></Learner><Learner><UserID>1068650</UserID><LearnerName>user, test_15</LearnerName><CourseName>Test Course</CourseName><DateAssigned>23/07/2012</DateAssigned><DateStarted>23/07/2012</DateStarted><DateCompleted>24/07/2012</DateCompleted><EmployeeID/></Learner><Learner><UserID>1068651</UserID><LearnerName>user, test_16</LearnerName><CourseName>Test Course</CourseName><DateAssigned>23/07/2012</DateAssigned><DateStarted/><DateCompleted/> <EmployeeID/></Learner><Learner><UserID>1068652</UserID><LearnerName>user, test_17</LearnerName><CourseName>Test Course</CourseName><DateAssigned>23/07/2012</DateAssigned><DateStarted/><DateCompleted/> <EmployeeID/></Learner><Learner><UserID>1068653</UserID><LearnerName>user, test_18</LearnerName><CourseName>Test Course</CourseName><DateAssigned>23/07/2012</DateAssigned><DateStarted/><DateCompleted/> <EmployeeID/></Learner><Learner><UserID>1068654</UserID><LearnerName>user, test_19</LearnerName><CourseName>Test Course</CourseName><DateAssigned>23/07/2012</DateAssigned><DateStarted/><DateCompleted/> <EmployeeID/></Learner></LearnerReport>
Grid Source:
var source = {
datatype: "xml",
datafields: [
{name: 'UserID', map: '\\UserID', type: 'number'},
{name: 'EmployeeID', map: '\\EmployeeID', type: 'number'},
{name: 'Learner', map: '\\LearnerName', type: 'string'},
{name: 'Course', map: '\\CourseName', type: 'string'},
{name: 'Assigned', map: '\\DateAssigned', type: 'date'},
{name: 'Started', map: '\\DateStarted', type: 'date'},
{name: 'Completed', map: '\\DateCompleted', type: 'date'}
],
root: "LearnerReport",
record: "Learner",
id: '\\UserID',
url: url,
};
Hi shimmoril,
1. In my code the first row is empty. Take a look at the “i > 0”.
2. If you reproduce that issue, then you do not use the latest version. Make sure that you use jQWidgets 2.3.1. I tested with your code and the filter’s type is correctly recognized for empty and non-empty fields.Test Code with your XML data source:
<!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.7.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/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var source = { datatype: "xml", datafields: [ { name: 'UserID', map: '\\UserID', type: 'number' }, { name: 'EmployeeID', map: '\\EmployeeID', type: 'number' }, { name: 'Learner', map: '\\LearnerName', type: 'string' }, { name: 'Course', map: '\\CourseName', type: 'string' }, { name: 'Assigned', map: '\\DateAssigned', type: 'date' }, { name: 'Started', map: '\\DateStarted', type: 'date' }, { name: 'Completed', map: '\\DateCompleted', type: 'date' } ], root: "LearnerReport", record: "Learner", id: '\\UserID', url: 'xmlsource.xml' }; $("#jqxgrid").jqxGrid( { width: 670, source: source, filterable: true, sortable: true, autoshowfiltericon: true, columns: [ { text: 'Learner', datafield: 'Learner', width: 100 }, { text: 'Course', datafield: 'Course', width: 100 }, { text: 'Assigned', datafield: 'Assigned', width: 100 }, { text: 'Started', datafield: 'Started', width: 100 }, { text: 'Completed', datafield: 'Completed'} ] }); }); </script></head><body class='default'> <div id="jqxgrid"> </div></body></html>
The result is:
.
Best Regards,
Peter StoevjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.