This is a migrated thread and some comments may be shown as answers.

Grid Filter Creates extra unwanted operator filter for datetime column

2 Answers 174 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bulut
Top achievements
Rank 1
Bulut asked on 25 Oct 2018, 04:11 PM

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 Answers, 1 is accepted

Sort by
0
Bulut
Top achievements
Rank 1
answered on 25 Oct 2018, 05:38 PM
I also prepared a dojo. When you try to filter datetime column there is an extra empty dropdown showing 
0
Accepted
Tsvetomir
Telerik team
answered on 29 Oct 2018, 11:05 AM
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.

Tags
Grid
Asked by
Bulut
Top achievements
Rank 1
Answers by
Bulut
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or