[Solved] Externally filtering grid date columns on client

[Ryan O'Neill]

I have an MVC grid which I adjust the column filters from the client. This enables me to change the filters from other controls on the form, for example a search text box or a jQuery date picker.

This works great for text columns but does not work 100% on date columns. The following code attempts to set a filter on a date field which works fine and filters the grid correctly. However, when I click the filter drop down for the date column I get 'undefined NaN undefined' in the filter date text box which is shown in red (image attached).

I am using version 2011.1.315.340.

var grid = $("#Grid").data("tGrid");
var column = grid.columnFromMember("BookingDate");
column.filters = [];
column.filters.push({ operator: 'ge', value: 'Sat 06 Aug 2011' });
grid.filter(grid.filterExpr());

As I said, this works 100% for text columns so I'm missing something daft.

Thanks in advance

Ryan

[Atanas Korchev]

Hi Ryan O'Neill,

 The date should be in a very specific format in order to work properly. You can try this instead:

var dateString = $.telerik.formatString('{0:yyyy-MM-ddTHH-mm-ss}', date); //where date is a JavaScript date object

Regards,
Atanas Korchev
the Telerik team

[Ryan O'Neill]

Unfortunately, that does not work and causes a script error when attempting to parse the value as it is in the wrong format.

The current code is;

var grid = $("#Grid").data("tGrid");
var column = grid.columnFromMember("BookingDate");
var DateStart = new Date($('.range-start').val());
var dateString = $.telerik.formatString('{0:yyyy-MM-ddTHH-mm-ss}', DateStart);

column.filters = [];
column.filters.push({ operator: 'ge', value: dateString });

alert(grid.filterExpr()); // ** This falls over on parsing the date.
 grid.filter(grid.filterExpr());

From setting breakpoints in Chrome I can see that line 328 of telerik.grid.filtering.js is using a different format;
date = $t.datetime.parse({ value: value, format: getFormat(column) }).toDate(); In this case, the value is '2011-01-01T00-00-00' and the format is 'ddd dd MMM'.

Tracing this through a few more levels brings me to line 653 of telerik.common.js (parse function)
t.datetime.parseMachineDate({
It is in here that the date format is used to parse but it is still wrong.

[Atanas Korchev]

Hello Ryan O'Neill,

 Can you confirm that DateStart is a valid date object? I don't think you can create a date object the way you do.

All the best,
Atanas Korchev
the Telerik team

[Ryan O'Neill]

Yes, it is a valid date format, I've checked by using;

alert(Object.prototype.toString.call(DateStart));

The return is [object Date]. Additionally, I have the filtering working (see SQL trace snippet below) but when I access the filter drop down after applying the filter I still get the 'undefined NaN undefined' in the two date input textboxes in the UI.

SQL snippet generated by applying client side filters to date column:

WHERE ([Extent1].[VenueId] = @p__linq__0) AND ([Extent1].[BookingDate] >= convert(datetime, ''2011-01-01 00:00:00.000'', 121)) AND ([Extent1].[BookingDate] <= convert(datetime, ''2011-05-02 00:00:00.000'', 121))

From my understanding, the filter is being applied correctly but the UI javascript needs additional data for the filter selection when it is a date. I don't know where this data is being stored if not in the the filter.

Thanks for your help so far.

[Atanas Korchev]

Hi Ryan O'Neill,

I still think an invalid date is being generated by this call:

var DateStart = new Date($('.range-start').val());

The constructor which accepts strings requires very specific date format in order to work. Are you using the same format? DateStart.toString() is supposed to return the date in human readable format not [object Date]. You can try creating a date using another overload:

var DateStart = new Date(2011, 1,1)

and see if the filtering will work.

Regards,
Atanas Korchev
the Telerik team

[Ryan O'Neill]

I did try feeding in known basic dates directly and yes it still gives an error. I just confirmed by doing so again.

The [object Date] bit is not the result of toString, it was the result of checking the type of the object (the 2nd answer here is where I got this from).

For now, I've disabled the filter dropdowns as it works without them (my datepicker handles the filtering UI).

In summary, the filtering works but the UI does not display the filter values and shows an ugly red error if viewed after a filtering operation.
In case you want it, the current test case code is shown here;

function FilterGridByDate() {
    var grid = $("#Grid").data("tGrid"); // Assumption that all grids are named Grid.
    var column = grid.columnFromMember('BookingDate'); // Assumption that it is always BookingDate we are searching for.
    var FilterValue = new Date(2011, 1, 1);
    var FilterValueText = $.telerik.formatString('{0:yyyy-MM-ddTHH-mm-ss}', FilterValue);

    column.filters = []; // Wipe all previous filters for this column.
    column.filters.push({ operator: 'ge', value: FilterValueText });

    alert(grid.filterExpr()); // ** Will NOT return from this function due to a date parsing issue.

    grid.filter(grid.filterExpr());

    return;
}