I am trying to filter my grid by a date column. The problem is that the date is passed as "Thu Oct 04 2018 17:30:00 GMT+0100 (Irish Standard Time)"
while I want a date in ISO 8601 format "2018-10-14T17:30:23Z".
I'm unsure whether this is set by the DatePicker or the grid and where I can change it.
I tried to format in the filter function, but I'm getting the same result e.g.
filter: function(e) {
if (e.sender.dataSource.options.schema.model.fields[e.field].type === "date") {
e.filter.filters.forEach(function(f){
f.value = moment(f.value).toISOString();
});
}
}
Any help is greatly appreciated. It's driving me bonkers !
5 Answers, 1 is accepted
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
Rank 1
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.
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
Rank 1
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
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.
Regards,
Viktor Tachev
Progress Telerik