jQWidgets Forums

jQuery UI Widgets Forums Grid Empty Cell Filtering

This topic contains 8 replies, has 2 voices, and was last updated by  Peter Stoev 13 years ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Empty Cell Filtering #5708

    shimmoril
    Participant

    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.

    Empty Cell Filtering #5717

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets team
    http://www.jqwidgets.com

    Empty Cell Filtering #5733

    shimmoril
    Participant

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

    Empty Cell Filtering #5734

    Peter Stoev
    Keymaster

    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 Topics

    Best Regards,
    Peter Stoev

    jQWidgets team
    http://www.jqwidgets.com

    Empty Cell Filtering #5740

    shimmoril
    Participant

    Thanks again for your help Peter, being able to search will be very useful.

    Empty Cell Filtering #6326

    shimmoril
    Participant

    Do you have any further information on the status of this bug? It is affecting all of our grids and is very frustrating.

    Empty Cell Filtering #6327

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets team
    http://www.jqwidgets.com

    Empty Cell Filtering #6329

    shimmoril
    Participant

    Please 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,
    };

    Empty Cell Filtering #6341

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.