Grid Calendar and Timepicker theme is wrong inside calendar.

2 posts, 0 answers
  1. Simona
    Simona avatar
    5 posts
    Member since:
    Nov 2010

    Posted 28 Feb 2019 Link to this post

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

                                                    )
    )

     

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 05 Mar 2019 Link to this post

    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
    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.
Back to Top