jQuery UI Widgets › Forums › Grid › Date Range Filter in Virtual Mode
Tagged: date, filter, filtering, grid, jqxgrid, range, server-side, virtualmode
This topic contains 6 replies, has 3 voices, and was last updated by Dimitar 9 years, 6 months ago.
-
Author
-
I am trying to implement a date range filter on a virtual grid. Everything works absolutely brilliantly apart from one small thing… When I select a date range to filter on, the filter is applied, but the selected date range disappears from the filter box. This does not happen in local mode, only virtual mode.
Can anyone tell me why this is happening and whether there is anything I can do to sort it? Is it a bug?
In case you need it, here is my code:
// Prepare the response data var source = { url: '//dev.api.domain.net/object/request/', data: { item: item, keys: keys }, dataType: 'json', datafields: [ { name: 'id', map: 'Some_ID' }, { name: 'some_date', map: 'Date', type: 'date' }, { name: 'description', map: 'Description' }, { name: 'details', map: 'Details' } ], filter: function(){ $("#grid").jqxGrid('updatebounddata', 'filter'); }, sort: function(){ $("#grid").jqxGrid('updatebounddata', 'sort'); }, beforeprocessing: function(data){ if(data!=null){ source.totalrecords = data.rows; } } }; // Get the table data information var settings = { loadServerData: function(serverdata,source,callback){ MN.ajax({ url: source.url, dataType: source.datatype, data: serverdata, cache: false, success: function(data){ source.beforeprocessing(data); dataAdapter.loadjson(null,data.results,source); callback({ records: dataAdapter.records, totalrecords: source.totalrecords }); }, error: function(msg){ // Not relevant } }); } }; // Initialize the data adapter var dataAdapter = new $.jqx.dataAdapter(source,settings); // Initialize the grid $('#grid').jqxGrid({ width: 900, height: 500, altrows: true, source: dataAdapter, theme: 'metro', selectionmode: 'singlerow', showfilterrow: true, filterable: true, autoshowfiltericon: true, sortable: true, pageable: true, pagesize: 16, pagermode: 'simple', virtualmode: true, columnsresize: true, columns: [ { text: 'Date', datafield: 'date', align: 'center', cellsalign: 'center', cellsformat: 'dd-MMM-yyyy h:mm:ss tt', width: '180', filtertype: 'date' }, { text: 'Description', datafield: 'description', filtertype: 'textbox' }, { text: 'Details', datafield: 'details', filtertype: 'textbox' } ], rendergridrows: function(obj){ return obj.data; } });
Hello Benji6996,
When ‘virtualmode’ is true, a different sort and filter logic has to be implemented. You can refer to the PHP demo Grid Server Sorting, Paging and Filtering to learn what approach you should take.
Also, you can look at http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-filtering.htm.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi,
I am aware of how the PHP binding works, I have used this example to write the base of my code. However, there is still an underlying issue that I feel may be a bug.
When you apply a filter to a grid, the value you enter stays in the box you entered it. But, when you select a date or a date range, when in virtual mode, the value does not stay in the box. So, if you try to apply multiple filters to a grid, when you enter into a ‘text’ column, it ignores the filter you had applied to the date column.
I have applied all the same functions and code that your example advises, so I believe the problem lies in the code that handles filtering in virtual mode.
I have tried to manually do it using the ‘filter’ function but I did not succeed with this. Is there a callback once the filter has been applied that I can use to get the value sent to the server and then reinsert it back into the date field?
Thanks in Advance,
B
Hi Benji6996,
You may use ‘applyfilters’ function to apply all filters to the Grid. I would suggest you to use the latest version of jQWidgets(3.7.1).
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/I would love to update to the latest version of jQWidgets, but last time I did this, a range of my grids stopped working because the internal function dataAdapter.loadjson changed the way it indexed data on pages after page 1… See http://www.jqwidgets.com/community/topic/cannot-read-property-uid-of-undefined/
If this has been amended then I will definitely update 🙂
Thanks,
B
I have now updated to the latest version and I can confirm this issue (date filter) still remains in virtual mode
B
Hello B,
We tested a grid with server-side filtering enabled and the following settings:
$("#jqxgrid").jqxGrid({ width: 550, source: dataadapter, filterable: true, showfilterrow: true, sortable: true, autoheight: true, pageable: true, pagesize: 3, pagesizeoptions: ['3', '4', '5'], virtualmode: true, rendergridrows: function(obj) { return obj.data; }, columns: [{ text: 'First Name', datafield: 'FirstName', width: 100 }, { text: 'Last Name', datafield: 'LastName', width: 100 }, { text: 'Title', datafield: 'Title', width: 180 }, { text: 'Birth Date', datafield: 'BirthDate', cellsformat: 'yyyy-MM-dd', align: 'right', cellsalign: 'right', filtertype: 'range' }] });
After filtering the “Birth Date” column with the date range filter, the filter values remain in the datetimeinput. This is shown in the following image: http://s27.postimg.org/i25rggmg3/server_range_filtering.png.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.