jQWidgets Forums
jQuery UI Widgets › Forums › Grid › How to add date filter on range column
This topic contains 1 reply, has 1 voice, and was last updated by Admir Hodžić 6 years, 2 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
I am trying to preload (init) filter on grid which showing filter row
(showfilterrow: true)
on date colun whit filter type set to range(filterType: 'range')
Am I doing something wrong or it is impossible to set date range filter through api.
Here is my fiddle JS Fiddle for preinitealied date filterHere is my code if fiddle stop working
var data = generatedata(500); var source = { localdata: data, datafields: [{ name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'date', type: 'date' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }], datatype: "array" }; var addfilter = function () { var filtergroup = new $.jqx.filter(); var filtervalueFrom = new Date(2019,2,20); var filtervalueUpTo = new Date(2019,2,20); var filterconditionOd = 'GREATER_THAN_OR_EQUAL'; var filterconditionDo = 'LESS_THAN_OR_EQUAL'; var filterOd = filtergroup.createfilter('datefilter', filtervalueFrom, filterconditionOd); var filterDo = filtergroup.createfilter('datefilter', filtervalueUpTo, filterconditionDo); var filter_or_operator = 1; filtergroup.addfilter(filter_or_operator, filterOd); filtergroup.addfilter(filter_or_operator, filterDo); $("#jqxgrid").jqxGrid('addfilter', 'date', filtergroup); $("#jqxgrid").jqxGrid('applyfilters'); } var adapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid({ width: 500, theme: 'energyblue', showfilterrow: true, source: adapter, filterable: true, sortable: true, ready: function () { addfilter(); }, autoshowfiltericon: true, columns: [{ text: 'First Name', datafield: 'firstname', filterType: 'checkedlist', filteritems: ["Beate", "Antoni"], width: 90 }, { text: 'Last Name', datafield: 'lastname', filterType: 'checkedlist', width: 90 }, { text: 'Product', datafield: 'productname', width: 170 }, { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd.MM.yyyy', filterType: 'range' }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }] });
Appologies for spaming,
But looks like it date filter woks if you set one date end EQUAL conditionvar data = generatedata(500); var source = { localdata: data, datafields: [{ name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'date', type: 'date' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }], datatype: "array" }; var addfilter = function () { var filtergroup = new $.jqx.filter(); var filtervalue = new Date(2019,2,18); var filtercondition = 'EQUAL'; var filter1 = filtergroup.createfilter('datefilter', filtervalue, filtercondition); var filter_or_operator = 1; filtergroup.addfilter(filter_or_operator, filter1); $("#jqxgrid").jqxGrid('addfilter', 'date', filtergroup); $("#jqxgrid").jqxGrid('applyfilters'); } var adapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid({ width: 500, theme: 'energyblue', showfilterrow: true, source: adapter, filterable: true, sortable: true, ready: function () { addfilter(); }, autoshowfiltericon: true, columns: [{ text: 'First Name', datafield: 'firstname', filterType: 'checkedlist', filteritems: ["Beate", "Antoni"], width: 90 }, { text: 'Last Name', datafield: 'lastname', filterType: 'checkedlist', width: 90 }, { text: 'Product', datafield: 'productname', width: 170 }, { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd.MM.yyyy', filterType: 'range' }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }] });
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.