Sorting and filtering DateTime Column

[arossolParticipant]

I’m trying to filter and sort a DateTime column using the built-in column filter at the top as well as getting them to sort.

Currently the dates are properly displayed (Sep-30 2014 00:00), but the filter doesn’t show anything when I type in ‘Sep’. Further more, when I click the column, it sorts it alphabetically rather than chronologically.

Here’s what I currently I have:

…
var dataSource = {
datatype: “json”,
datafields: [
// fields that are Dto fields
{ name: ‘lastUpdated’, type: ‘date’},
… more
],
processdata: function(data) {
data.pagesize = 25;
},
localdata: localData
};

var dataAdapter = new $.jqx.dataAdapter(dataSource, { autoBind: true } );

$(“#mainGrid”).jqxGrid({
source: dataAdapter,
filterable: true,
showfilterrow: true,
width: ‘99.5%’,
theme: ‘classic’,
enablebrowserselection: true,
pagesizeoptions: [’25’, ’50’, ‘100’],
pagesize: 25,
pageable: true,
sortable: true,
autoheight: true,
autorowheight: true,
showfilterrow: true,
columnsresize: true,
columnsreorder: true,
columns: [
{text: “my column” />”, datafield: “lastUpdated”, width: ‘10%’, hidden: true, cellsformat: dateTimeFormat},
…more columns
]
});

lastUpdated is from the Java frontend which is a Json-ified Long ( java.util.Date.getTime() )

I have a JavaScript function that converts that displayed string to a sortable form

/*
* This function converts a String in the default date format (MMM-dd-yyyy HH:mm)
* to YYYY-MM-DD HH:mm format, which can be used for sorting dates.
*/
function convertDateToSortableFormat(inputDate) {
…
}

Any help would be greatly appreciated, thanks!

[DimitarParticipant]

Hello arossol,

For date columns, please use filtertype “range” or “date”. Here is a demo about these options: Date & Range Filter.

Best Regards,
Dimitar

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

[arossolParticipant]

Hi Dimitar,

Is there any way to do this with the existing display format?

Thanks,

-Alex

[DimitarParticipant]

Hi Alex,

As shown in the demo, the filter widget (jqxDateTimeInput) has the same format as the one specified for the cells.

Best Regards,
Dimitar

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

[rkeverParticipant]

Greetings,

I’ve tried 2 methods to get our column dropdown filter dialog to contain a date range picker and have had no luck with either.

First I tried to use the jqxDateTimeInput (range type) within the column dropdown filter using the build in filtertype option. In a column options I set the {filtertype: ‘range’} and the dropdown filter shows the text input with no datepicker. If I set it to {filtertype: ‘date’} it works which is not what we were aiming for.

Second option was to make a custom filter {filtertype: ‘custom’, createfilterpanel: (datafield, filterPanel) => {/* my custom code */}. I successfully created date range picker that provides the range selector as expected. The issue is that when the range picker shows and I’ve clicked on it, due to the fact it’s rendered outside the dropdown filter, it closes the dropdown filter with the date range selector still visible and of course it then won’t take the selection since the filter has been closed.

Is there some way to force the dropdown filter to stay open until I programmatically tell it to close?

Thanks,

~~~Robert

[DimitarParticipant]

Duplicate post: http://www.jqwidgets.com/community/topic/adding-date-picker-to-column-dropdown-filter/.

[Author]

Posts