This is a migrated thread and some comments may be shown as answers.
How can I format date filter passed into query string as ISO 8601
5 Answers 59 Views
This is a migrated thread and some comments may be shown as answers.
Ciaran
Top achievements
Rank 1
Ciaran asked on 14 Oct 2018, 05:55 PM

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

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 15 Oct 2018, 08:24 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ciaran
Top achievements
Rank 1
answered on 15 Oct 2018, 08:40 AM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 15 Oct 2018, 11:01 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ciaran
Top achievements
Rank 1
answered on 19 Oct 2018, 09:53 AM

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

 

0
Viktor Tachev
Telerik team
answered on 23 Oct 2018, 09:39 AM
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.



Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Ciaran
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Ciaran
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or