jQWidgets Forums

Tagged: filter time values, grid, grid time filter

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

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

Author

Filtering time Posts

April 3, 2012 at 3:29 pm Filtering time #3189

zibotaz

Member

Hello,

I have this column descirption :
var source =
{
datatype: “json”,
datafields: [
{ name: ‘S_TIMED’, type:’date’ },
….

and
filterable: true,
columns: [
{ text: ‘Hour’, dataField: ‘S_TIMED’, width: 50, pinned:true, cellsformat: ‘HH:mm’ },

I use a type date for my colum because there is no type time. And i want the possibility to filter this column.

When i want filter this column with less than 10:00, i have the error : « tryparsedate » : null object or undefined and when i write less than 2012-04-03T10:00, the result is good. There is a way to the first typing work too?

Thanks

Steve

April 3, 2012 at 3:49 pm Filtering time #3194

Peter Stoev

Keymaster

Hi Steve,

Its currently not possible to filter time-only values. We’ll implement this missing functionality for the next release which will be in the end of this week.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 4, 2012 at 9:55 am Filtering time #3212

zibotaz

Member

Thanks

April 10, 2012 at 12:35 pm Filtering time #3307

zibotaz

Member

Hello,

I download the new version of jqwidget 2.0 but i don’t see anythong about time filtering. Column type can be “time” and it is possible to filter time column ?

Thanks,

Steve

April 10, 2012 at 12:44 pm Filtering time #3308

Peter Stoev

Keymaster

Hi Steve,

The column type for filtering date and time values should be set to ‘date’. However, the built-in filtering in the new version is extended to date and time filtering, not only dates.

Here’s a sample with enabled filtering. The Order Date columns is formatted to display only the time-part of the date.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function generatedata(rowscount) {
                // prepare the data
                var data = new Array();
                if (rowscount == undefined) rowscount = 100;
                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", "Caramel 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 < rowscount; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);
                    row["id"] = i;
                    row["available"] = productindex % 2 == 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;
                    var date = new Date();
                    date.setFullYear(2012, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
                    date.setHours(Math.floor(Math.random() * 23), Math.floor(Math.random() * 59), 0, 0);
                    row["date"] = date;
                    data[i] = row;
                }
                return data;
            }
            var source =
            {
                localdata: generatedata(100),
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                filterable: true,
                columnsresize: true,
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Order Date', dataField: 'date', cellsformat: "HH:MM", width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

In the filtering menu, you can set a filter like: Less Than 14

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.