jQWidgets Forums
Forum Replies Created
-
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
Here is my output, with Virtual Mode on
Thanks for you help on this
Greg