Hello, Ciaran,

Thank you for giving Kendo UI a test run.

The easiest way to convert a Date object to the desired ISO 8601 format is to call the toJSON() method.

In case you are also interested in offsetting the local date time, I created a sample implementation here:

https://dojo.telerik.com/@bubblemaster/IBIsAJUg

Finally, the ability to provide a TimeZone for the DatePicker of the Filterable UI would have allowed you to achieve this out of the box and I found that this is currently a feature request. If you have the time, please cast a vote for these items that I found here. The most popular items in our UserVoice portal get pushed forward for implementation by the team:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/3842909-support-binding-of-datetimepicker-to-type-datetime
http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/7240248-add-ability-to-disable-daylight-savings-or-specify

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Thanks Alex,

I'm still getting the same issue. Even though this line 

filter.filters[i].value = valueUTC;

correctly sets the value. What is passed in the query string is wrongly formatted.

Hello, Ciaran,

It would be very helpful to see an example that I can run locally.

Do you think you could modify the Dojo that I sent with some mocked data? 

Alternatively, you may send the Kendo UI Grid and DataSource as well as a sample data item and I can create a runnable example for your convenience.

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Hi Alex,

Please below my code containing the grid setup. 

(function () {

"use strict";

angular
.module("app")
.controller("PatrolsController", controller);

controller.$inject = ["$state", "routes", "createdBy"];

function controller($state, routes, createdBy) {

const vm = this;

function convertDateToUTC(filter) {
const filters = filter.filters;
for (let i = 0; i < filters.length; i++) {
const field = filters[i].field;
if (field === "started_at" || field === "completed_at") {
const date = filters[i].value;
filter.filters[i].value = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toJSON();
console.log(filter.filters[i].value);
}
}
}

function onChange() {
const grid = $("#grid").data("kendoGrid");
const selectedItem = grid.dataItem(grid.select());
$state.go("app.patrol.details", {id: selectedItem.id});
}

function routeFilter(element) {
element.kendoDropDownList({
dataSource: {
data: routes
},
dataTextField: "route_name",
dataValueField: "id",
optionLabel: "--Select Route--"
});
}

function createdByFilter(element) {
element.kendoDropDownList({
dataSource: {
data: createdBy
},
dataTextField: "created_by",
dataValueField: "id",
optionLabel: "--Select Person--"
});
}

function dateFilter(element) {
element.kendoDateTimePicker({
format: "dd/MM/yy HH:mm"
});
}

function statusFilter(element) {
element.kendoDropDownList({
dataSource: {
data: [{id: "complete", name: "Complete"}, {
id: "incomplete",
name: "Incomplete"
}, {id: "in_progress", name: "In Progress"}]
},
dataTextField: "name",
dataValueField: "id",
optionLabel: "--Select Status--"
});
}

function flaggedFilter(element) {
element.kendoDropDownList({
dataSource: {
data: [{id: 1, name: "Issues"}, {id: 0, name: "No Issues"}]
},
dataTextField: "name",
dataValueField: "id",
optionLabel: "--Select Status--"
});
}

function onFilterMenuInit(e) {
if (e.field === "started_at" || e.field === "completed_at") {
const beginOperator = e.container.find("[data-role=dropdownlist]:eq(0)").data("kendoDropDownList");
beginOperator.value("gte");
beginOperator.trigger("change");
beginOperator.readonly();

const logicOperator = e.container.find("[data-role=dropdownlist]:eq(1)").data("kendoDropDownList");
logicOperator.readonly();

const endOperator = e.container.find("[data-role=dropdownlist]:eq(2)").data("kendoDropDownList");
endOperator.value("lte");
endOperator.trigger("change");
endOperator.readonly();
}
}

function onFilter(e) {
if (e.field === "started_at") {
convertDateToUTC(e.filter)
}
}

function onParse(response) {
angular.forEach(response.rows, function (row) {

row.route_id = row.route_name;
row.created_id = row.created_by;

row.started_at = new Date(row.started_at);
row.completed_at = _.isNil(row.completed_at) ? "" : new Date(row.completed_at);

row.status = row.in_progress ? "In Progress" :
row.incomplete ? "Incomplete" : "Complete";

row.status_class = row.in_progress ? "status--progress" :
row.incomplete ? "status--incomplete" : "status--complete";

row.flagged = row.flagged ? "Issue" : "";
row.flagged_class = row.flagged ? "status status--incomplete" : "";
});

return response;
}

vm.gridOptions = {
toolbar: ["excel"],
excel: {
fileName: "inspections.xlsx",
filterable: true,
allPages: true
},
dataSource: {
transport: {
read: "/api/patrols",
dataType: "json"
},
schema: {
total: "count",
data: "rows",
parse: onParse
},
serverSorting: true,
serverPaging: true,
serverFiltering: true,
pageSize: 50,
sort: {field: "started_at", dir: "desc"}
},
sortable: true,
groupable: false,
reorderable: false,
selectable: "row",
resizable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: [100, 200, 500]
},
columns: [
{
field: "route_id",
title: "Route",
filterable: {
ui: routeFilter,
extra: false
}
},
{
field: "created_id",
title: "Inspected By",
filterable: {
ui: createdByFilter,
extra: false
}
},
{
field: "started_at",
title: "Started At",
type: "date",
format: "{0: dd/MM/yy HH:mm}",
filterable: {
ui: dateFilter,
extra: true,
messages: {
info: "Patrols Started between:"
},
operators: {
date: {
gte: "Begin Date",
lte: "End Date"
}
}
}
},
{
field: "completed_at",
title: "Completed At",
type: "date",
format: "{0: dd/MM/yy HH:mm}",
filterable: {
ui: dateFilter,
extra: true,
messages: {
info: "Patrols Started between:"
},
operators: {
date: {
gte: "Begin Date",
lte: "End Date"
}
}
}
},
{
field: "status",
title: "Status",
template: "<span class='status #=status_class#'>#=status#</span>",
filterable: {
extra: false,
ui: statusFilter
}
},
{
field: "flagged",
title: "Issues",
template: "<span class='#=flagged_class#'>#=flagged#</span>",
filterable: {
extra: false,
ui: flaggedFilter
}
}
],
filterMenuInit: onFilterMenuInit,
change: onChange,
filter: onFilter
};

}

})();

 

 

Kind regards,

Ciaran

 

Hi Ciaran,

I tested the behavior in a sample dojo and the filtering seems to work as expected. Please check it out below and let me know how it works for you.

It would be great if you can modify the sample in a way that the behavior you are seeing is replicated and send it back. This will enable us to examine the issue and look for its cause.

• https://dojo.telerik.com/EjuKaGAR

Regards,
Viktor Tachev
Progress Telerik