How can I format date filter passed into query string as ISO 8601

6 posts, 0 answers
  1. Ciaran
    Ciaran avatar
    3 posts
    Member since:
    Apr 2018

    Posted 14 Oct 2018 Link to this post

    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 !

     

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 15 Oct 2018 Link to this post

    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.
  3. Ciaran
    Ciaran avatar
    3 posts
    Member since:
    Apr 2018

    Posted 15 Oct 2018 in reply to Alex Hajigeorgieva Link to this post

    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.

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 15 Oct 2018 Link to this post

    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.
  5. Ciaran
    Ciaran avatar
    3 posts
    Member since:
    Apr 2018

    Posted 19 Oct 2018 in reply to Alex Hajigeorgieva Link to this post

    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

     

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 23 Oct 2018 Link to this post

    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.
Back to Top