Grid Calendar and Timepicker theme is wrong inside calendar.

[Simona]

Hello,

 

I'have a grid and the Calendar and TimePicker looks verry old, like it doens't have a bootstrap theme.

 

Can you please help me ? It's urgent we have to finish the project asap.

 

Here is the code:

 

@(Html.Kendo().Grid<OverTimeKendo.Models.OverTime>
                                                ().Name("OverTime")
                                                .Selectable()
                                                .Columns
                                                (columns =>
                                                {
                                                    columns.Bound(c => c.Id).Hidden(true);
                                                    columns.Bound(c => c.RecordDate);
                                                    columns.Bound(c => c.TimeFrom);
                                                    columns.Bound(c => c.TimeTo);
                                                    columns.Bound(c => c.NumberOfHours);
                                                    columns.Bound(c => c.OvertimeReason);
                                                    columns.Command(command => { command.Edit(); }).Width(100);
                                                    columns.Command(command => { command.Destroy(); }).Width(100);

                                                })
                                                .ToolBar(toolbar =>
                                                {
                                                    toolbar.Create();

                                                })
                                .Editable(editable => editable.Mode(GridEditMode.InLine))
                                    .Pageable(pageable =>
                                    {
                                        pageable.Refresh(true);
                                        pageable.PageSizes(true);
                                    })
                                       .Sortable()
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Model(model =>
                                    {
                                        model.Id(p => p.Id);
                                        model.Field(p => p.Id).Editable(false);

                                    })

                                    .Read(read => read.Action("Read_Overtime", "OverTimes"))
                                    .Create(create => create.Action("Add_Overtime", "OverTimes"))
                                    .Update(update => update.Action("Update_Overtime", "OverTimes"))
                                    .Destroy(destroy => destroy.Action("Destroy_Overtime", "OverTimes"))

                                                )
)

 

 

[Tsvetina]

Hi Simona,

The picker shown in your screenshot is actually an HTML 5 <input type="date"/>. This is the way Chrome renders date inputs. If you want to show a DateTimePicker instead, try the following steps:

1. Make sure your project includes the basic Kendo UI Editor templates. They are available in Views/Shared/EditorTemplates. There should be a DateTime.cshtml file. If the folder is missing, empty, or there are no basic templates in it, copy them from C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core R1 2019\wrappers\aspnetcore\EditorTemplates\razor. The highlighted part should correspond to the version of UI for ASP.NET Core that you have installed on your computer.

2. Once you confirm the DateTime template is there, open the definition of the model that you are editing in the Grid and add a [DataType(DataType.DateTime)] annotation to the RecordDate field:

public class OvertimeViewModel {
    ....

    [DataType(DataType.DateTime)]
    public DateTime RecordTime { get; set; }

    ....
}

This should tie the DateTime editor to the field where you need to use it.

Regards,
Tsvetina
Progress Telerik