Grid filter date format

[Richard]

Good afternoon,

I've used the following to get the date filter in my Grid to use the dd/MM/yyyy format:

columns.Bound(t => t.Datestamp).Title("Date").Format("{0:dd/MM/yyyy HH:mm:ss}").Filterable(f => f.UI("datestampFilter"));

    function datestampFilter(element) {
        element.kendoDatePicker({
            format: "{0:dd/MM/yyyy}",
            parseFormats: ["dd/MM/yyyy"]
        });
    }

This works but the class of the datepicker input is incorrect and, as as result, the button is not aligned right and the border of the input is darker:

It generates an input:

<input title="Value" data-bind="value:filters[0].value" class="" type="text" data-role="datepicker" role="combobox" aria-expanded="false" aria-haspopup="grid" autocomplete="off" aria-disabled="false" aria-readonly="false">

It's missing class="k-input-inner" which is what is generated when no formatting is applied to the date column.

Have I missed something else which is causing the slightly incorrect styling?

Kind regards,

Richard

[Alexander]

Hi Richard,

Thank you for the provided information, snippets, and screenshot.

We are aware of the reported issue and I am happy to let you know that as of version R1 2022 SP1 (v.2022.1.301), the issue has been resolved.

Therefore, I would recommend upgrading your Telerik UI For ASP.Net.Core version to the newest, in order to get the latest updates, features, and fixes. You can review the Upgrade Article Guideline in case you experience any difficulties.

It is important to note also, that if you are upgrading through the NuGet package manager, both the versions of the client-side files and NuGet package need to be corresponding. You can verify this within the developer's console. For example:

If you don't find this option viable, I would recommend using the following approach:

• Subscribe to the FilterMenuInit event and provide a handler:

.Events(ev=>ev.FilterMenuInit("onFilterMenuInit"))

• Within the event, add to the input element of the Date field the "k-input-inner" class manually:

function onFilterMenuInit(e){
    if(e.field == 'MyDateTime'){
        $(e.container).find("input").addClass("k-input-inner")
    }
}

I hope you find this helpful.

Regards,
Alexander
Progress Telerik

[Richard]

Hi Alexander,

As you mentioned, upgrading to UI for ASP.NET Core R1 2022 SP1 (version 2022.1.301) has fixed this issue and now the dates and inputs are formatting correctly.

Kind regards,

Richard