jQuery UI Widgets Forums Grid Date filter icon missing when grid is in virtual mode

This topic contains 8 replies, has 4 voices, and was last updated by  Peter Stoev 8 years, 9 months ago.

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

  • max5000
    Participant

    Hi,
    Using version 3.5.0. I have a date field in my grid and the drop-down filter/sort works correctly. There is a date icon, and I can select a date and it filters correctly. When I put the grid into Virtual mode and turn on paging, the filter date icon does not appear any more. The paging works correctly, just missing the date filter icon.
    The data is coming from a json source.


    Nadezhda
    Participant

    Hello max5000,

    Please, try the below example which works on our side:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.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/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.pager.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/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = generatedata(500);
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'name', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'available', type: 'bool' },
                        { name: 'date', type: 'date' },
                        { name: 'quantity', type: 'number' }
                    ],
                    datatype: "array"
                };
                var rendergridrows = function (params) {
                    var data = generatedata(params.endindex - params.startindex);
                    return data;
                }
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    filterable: true,
                    virtualmode: true,
                    pageable: true,
                    rendergridrows: rendergridrows,
                    selectionmode: 'multiplecellsextended',
                    columns: [
                      { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
                      {
                          text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
                      },
                      { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                      { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd', filtertype: "date" },
                      { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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


    max5000
    Participant

    Hi, I have tried that example and it does work for me also. But when I change the data source to a JSON source, then the icon no longer shows up (unless I then also turn off Virtual Mode).
    Here is my code (a modified version of your example to use my data script), I must be doing something wrong but I don’t see it.
    So this code works, it displays 1 date column and the filter shows the icon and filters correctly. If I put Virtual mode on, then the icon disappears.

    <!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/ver3.5.0/jqwidgets/styles/jqx.base.css" type="text/css" />    
    
        <script type="text/javascript" src="jquery/1.10.2/js/jquery-1.9.1.js"></script>      
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="jqwidgets/ver3.5.0/scripts/demos.js"></script>    
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/generatedata.js"></script>       
    
        <script type="text/javascript" src="jqwidgets/ver3.5.0/jqwidgets/jqxgrid.pager.js"></script>     
    
        <script type="text/javascript">
            $(document).ready(function () {
    
                var data = generatedata(500);
                var theme = 'bootstrap';
    
                var source =
                {                
                    datatype: "json",
                    datafields: [
                        { name: 'BCDateTime', type: 'date'}
                    ],
                    url: 'databaseTEST.cfc?method=getLogs',                   
                    filter: function () {
                        // update the grid and send a request to the server.
                        $("#logGrid").jqxGrid('updatebounddata');
                    },
                    sort: function () {
                        // update the grid and send a request to the server.
                        $("#logGrid").jqxGrid('updatebounddata');
                    },                     
                    root: 'ROWS',
                    beforeprocessing: function (data) {
                        source.totalrecords = data.Records;
                    }
                };
    
                var adapter = new $.jqx.dataAdapter(source);           
    
                    $("#jqxgrid").jqxGrid(
                    {
                        source: adapter,
                        filterable: true,
                        sortable: true,
                        autoheight: true,
    //                    pageable: true,
    //                    virtualmode: true,
    //                    showstatusbar: true,
    //                    enablehover: false,
                        autoshowfiltericon: true,
    
                        renderstatusbar: function (statusbar) {
                            // appends buttons to the status bar.
                        },
    
                        width: '100%',
                        pagesize: 20,
                        pagesizeoptions: ['10','20','50','100'],
                        rendergridrows: function () {
                            return adapter.records;
                        },
                        columns: [
                            { text: 'Date', datafield: 'BCDateTime', filtertype: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' }
    
                          ]
                    });
    
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    My server script returns the following data string
    {"ROWS":[{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"},{"BCDateTime":"Fri Sep 26 2014 00:00:00 GMT-0700 (Pacific Standard Time)"}],"Records":120}
    Right now its just returning the same date 20 times for the sake of this example.

    Here is my output, with Virtual Mode off
    Virtualmode commented out, date icon visible

    Here is my output, with Virtual Mode on
    Virtual mode true, no date icon

    Thanks for you help on this
    Greg


    Peter Stoev
    Keymaster

    Hi Greg,

    We tested your demo and the DateTimeInput is displayed correctly with or without virtual mode. Example with Virtual mode turned on: http://jsfiddle.net/jqwidgets/L16mLjp5/ and example with virtual mode turned off: http://jsfiddle.net/jqwidgets/ovbjy1fy/.

    Best Regards,
    Peter Stoev

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


    max5000
    Participant

    Hi guys, I really appreciate your help.

    So if I change my example to get the JSON string from a localdata variable then it works fine. As your examples do.
    When I put it back to
    url: 'databaseTEST.cfc?method=getLogs',

    then I loose the icon, so perhaps it’s not the JSON format that I thought was a problem but rather the way I am getting it from a URL? The server script is using cold fusion, but the string it returns is the exact string that works when I copy it a localdata var. Is it possible for you to run a test getting the data from a script instead of local? If I just put the JSON data in a html file and call that in the URL that also gives the problem with virtual mode on.

    Thanks
    Greg


    Peter Stoev
    Keymaster

    Hi Greg,

    From URL I would not be able to prepare for you online sample because I can’t put two files in one jsfiddle so they would be in the same domain. That is why I used your data which you posted. There is absolutely no difference whether it is loaded from URL or not because the Grid loads data when the adapter’s binding is completed.

    Best Regards,
    Peter Stoev

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


    max5000
    Participant

    Hi Peter,
    I understand that you can’t post a jsfiddle with external data, but could you try it on your own servers? Sorry for asking, don’t want to seem pushy, but this is what is happening. There should be no difference if it’s localdata or URL based but there appears to be an issue.

    By the way I did try the Filter Row method and the Date Range functionality is working fine in the filter row and my URL data. But I had decided not to use the Filter Row for other reasons. So I would much rather use the ‘normal’ filters rather than the filter row.

    I’ll keep trying different things but in the meantime can anyone confirm that they are using JSON data from a URL for a grid with VirtualMode, containing a date and that date filter has an icon?

    Thanks again
    Greg


    kgolofelos
    Participant

    Hi Greg and Peter,

    I’m experiencing the same problem aswell. My date filter works fine with virtual mode:true but the calendar icon does not show – I have to manually type in the date.

    It’s very weird that if I store the JSON data into a local variable instead of URL based JSON data, the calendar icon shows.

    I would like to find out if anyone has a solution for this? 🙂

    Regards
    Kgolofelo


    Peter Stoev
    Keymaster

    Hi Kholofelo,

    I already posted a working sample: http://jsfiddle.net/jqwidgets/L16mLjp5/ So according to me, most probably you’re missing either initialization settings or references to required scripts like jqxdatetimeinput.js or jqxcalendar.js or globalize.js

    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.