Grid Filter Creates extra unwanted operator filter for datetime column

3 posts, 1 answers
  1. Bulut
    Bulut avatar
    25 posts
    Member since:
    Dec 2016

    Posted 25 Oct 2018 Link to this post

    So far my grid works fine but on datetime filter area it creates a extra dropdown filter which I don't want and couldn't find out where it is coming from.

    Couldn't figure out why it is creating it only for datetime column.

    my js code is:

     

    $(document).ready(function () {
                            $("#listing-grid").kendoGrid({
                                dataSource: {
                                    type: "json",
                                    transport: {
                                        read: {
                                            url: "@Html.Raw(Url.Action("CargoListingList", "Cargo", new { cargoType = cargoType }))",
                                            type: "POST",
                                            dataType: "json"
                                        }
                                    },
                                    schema: {
                                        data: "Data",
                                        total: "Total",
                                        errors: "Errors",
                                        model: {
                                            fields: {
                                                CargoTitle: { editable: false, type: "string" },
                                                CommodityNames: { editable: false, type: "string" },
                                                CargoQty: { editable: false, type: "number" },
                                                CargoQtyId: { editable: false, type: "string" },
                                                IsPartCargo: { type: "boolean" },
                                                FirstPort: { editable: false, type: "string" },
                                                LastPort: { editable: false, type: "string" },
                                                LaycanStart: { editable: false, type: "datetime" },
                                                LaycanEnd: { editable: false, type: "datetime" },
                                                SeName: { editable: false, type: "string" }
                                            }
                                        }
                                    },
                                    pageSize: @(defaultGridPageSize),
                            serverPaging: true,
                                serverFiltering: true,
                                    serverSorting: true
                        },
                            pageable: {
                                refresh: true,
                                pageSizes: [@(gridPageSizes)]
                                },
                                scrollable: false,
                                sortable: true,
                                filterable: true,
                                    columns: [{
                                        field: "CargoTitle",
                                        title: "Title",
                                        width: 315,
                                            headerAttributes: { style: "text-align:center" },
                                        attributes: { style: "text-align:center" },
                                        template: '<a href="/cargo/#=SeName#">#=CargoTitle#</a>',
                                        headerTemplate: '<span title="The cargo listing title">Title <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
                                        filterable: { extra: false }
                                    }, {
                                            field: "CommodityNames",
                                            title: "Commodity(s)",
                                            width: 225,
                                            headerAttributes: { style: "text-align:center" },
                                            attributes: { style: "text-align:center" },
                                            headerTemplate: '<span title="Cargo Commodity(s)">Commodity(s) <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
                                            filterable: { extra: false }
                                    }, {
                                        field: "CargoQty",
                                        title: "Cargo Qty",
                                            width: 125,
                                            template: "#=CargoQty # #=CargoQtyId #",
                                        attributes: { style: "text-align:center" },
                                        headerAttributes: { style: "text-align:center" },
                                        headerTemplate: '<span title="Total Cargo Quantity">Cargo Qty <i class="fa fa-info-circle" aria-hidden="true"></i></span>'
                                    }, {
                                            field: "IsPartCargo",
                                            title: "PCGO",
                                            width: 105,
                                            template: '# if(IsPartCargo) {# <i class="fa fa-check true-icon"></i> #} else {# <i class="fa fa-close false-icon"></i> #} #',
                                            attributes: { style: "text-align:center" },
                                            headerAttributes: { style: "text-align:center" },
                                            headerTemplate: '<span title="Part Cargo">PCGO <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
                                            filterable: { messages: { info: "Part Cargo Availability:", isTrue: "Yes", isFalse: "No" } }
                                    }, {
                                            field: "FirstPort",
                                            title: "First POL",
                                            width: 150,
                                            headerAttributes: { style: "text-align:center" },
                                            attributes: { style: "text-align:center" },
                                            headerTemplate: '<span title="First Port of Loading">First POL <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
                                            filterable: { extra: false }
                                    }, {
                                            field: "LastPort",
                                            title: "Final POD",
                                            width: 150,
                                            headerAttributes: { style: "text-align:center" },
                                            attributes: { style: "text-align:center" },
                                            headerTemplate: '<span title="Final Descharging Port">Final POD <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
                                            filterable: { extra: false }
                                    }, {
                                        field: "LaycanStart",
                                        title: "First Layday",
                                        width: 140,
                                            template: "#= kendo.toString(kendo.parseDate(LaycanStart), 'dd/MM/yyyy HH:mm') #",
                                            attributes: { style: "text-align:center" },
                                        headerAttributes: { style: "text-align:center" },
                                            headerTemplate: '<span title="The first day for Laycan">First Layday <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
                                            filterable: {
                                                ui: "datetimepicker"
                                            }
                                    }, {
                                        field: "LaycanEnd",
                                        title: "Cancelation Day",
                                        width: 135,
                                            template: "#= kendo.toString(kendo.parseDate(LaycanEnd), 'dd/MM/yyyy HH:mm') #",
                                            attributes: { style: "text-align:center" },
                                        headerAttributes: { style: "text-align:center" },
                                            headerTemplate: '<span title="The cancelation day for Laycan">Cancelation Day <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
                                            filterable: {
                                                ui: "datepicker"
                                            }
                                    }
                                ],
                                filterMenuInit: function (e) {
                                    e.container.find('.k-filter-help-text').remove();
                                }
                                            });
     
                        $("#cargoes-grid").kendoTooltip({
                            filter: ".k-header span"
                        });
     
                                            });

     

     

  2. Bulut
    Bulut avatar
    25 posts
    Member since:
    Dec 2016

    Posted 25 Oct 2018 in reply to Bulut Link to this post

    I also prepared a dojo. When you try to filter datetime column there is an extra empty dropdown showing 
  3. Answer
    Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 29 Oct 2018 Link to this post

    Hi Bulut,

    Thank you for the provided declaration of the Kendo UI Grid you are using. 

    I have noticed that in the schema.model, the field type is set to "datetime", however that is not a valid JavaScript type.The available options are "string", "number", "boolean", "date" and "object".

    After changing the field type to date the dropdown in the filter is showing the options available for filtering a date field. Check out the modified dojo below for reference.


    For more information on the available options check out the options.fields.fieldName.type section of the following article:

    https://docs.telerik.com/kendo-ui/api/javascript/data/model/methods/define

    Let me know if you need further assistance.


    Kind regards,
    Tsvetomir
    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