Grid Filter Creates extra unwanted operator filter for datetime column

[Bulut]

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"
                    });

                                        });

 

 

[Bulut]

I also prepared a dojo. When you try to filter datetime column there is an extra empty dropdown showing 

[Tsvetomir]

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.

• https://dojo.telerik.com/iwehuBaS/8

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