Last Updated: 10 Aug 2021 10:13 by René
Created on: 25 May 2020 11:44
Category: DateInput
Type: Bug Report
DatePicker loses focus when used as data editor in the Grid and the input date starts with 0
DatePicker loses focus when used as data editor in the Grid and the input date starts with 0, for example 05/05/2020. As attached file, you can see a screen recording of the issue.
Attached Files:
Duplicated Items
Posted on: 10 Aug 2021 10:13
In an empty DatePicker (i.E. "dd.MM.yyyy" is displayed) typing "01012021" works.  Upon changing the value of a DatePicker (e.g. current Value is "02.02.2021") typing "01012021" does not work.
Posted on: 10 Aug 2021 10:01

The workaround will not work since the problem is not limited to DateInputs within grids.
No matter where you use a TelerikDatePicker you cannot type a date starting with zero.
See the duplicated item of this ticket.

If you use the format "dd.MM.yyyy" to get "01.01.2021"  users want to type "01012021" but this does not work.
The fastest way to type that date for now is typing "1.1.2021" but users won't use different typing patterns for one digit and two digit days/month.

Please make sure that this bug will be fixed for the next release.

In combination with this bug https://feedback.telerik.com/blazor/1523288-datepicker-won-t-let-the-user-type-in-a-year (because we use "dd.MM.yy" format a lot) typing in DatePicker is more or less impossible.



Svetoslav Dimitrov
Posted on: 25 May 2020 13:31


As a workaround, for the time being you can put the DatePicker in an EditorTemplate (more information on EditorTemplate here: https://docs.telerik.com/blazor-ui/components/grid/templates#edit-template).

<TelerikGrid Data="@Data"
        <GridColumn Field="@nameof(MyDataModel.Id)" Title="Id" />
        <GridColumn Field="@nameof(MyDataModel.Name)" Title="Name" />
        <GridColumn Field="@nameof(MyDataModel.DateOfBirth)" Title="DOB" Width="150px">
                    var item = context as MyDataModel;
                    <TelerikDatePicker @bind-Value="@item.DateOfBirth"></TelerikDatePicker>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>

@code {
    public void UpdateHandler(GridCommandEventArgs e)
        var item = e.Item as MyDataModel;

        var index = Data.FindIndex(x => x.Id == item.Id);
        if (index != -1)
            Data[index] = item;

    public List<MyDataModel> Data { get; set; } = Enumerable.Range(1, 20).Select(x => new MyDataModel()
        Id = x,
        Name = $"Name {x}",
        DateOfBirth = DateTime.Today.AddDays(-x).Date

    public class MyDataModel
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime DateOfBirth { get; set; }

Svetoslav Dimitrov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.