New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Implementing Custom Editors for the Scheduler Events

Environment

Product	Telerik UI for ASP.NET MVC Scheduler
Product Version	Created with version 2024.4.1112

Description

How can I use a custom template with editors to create new and edit the existing ASP.NET MVC Scheduler events?

Solution

Specify the name of the template through the TemplateName() option of the Editable configuration.

Razor

        @(Html.Kendo().Scheduler<MeetingViewModel>()
            .Name("scheduler")
            .Editable(editable => {
                editable.TemplateName("CustomEditorTemplate");
            })
            ...// Additional configuration.
        )

Create a View in the ~Views\Shared\EditorTemplates folder. The name of the View must match the specified name in the TemplateName() option (for example, CustomEditorTemplate.cshtml). The created template automatically receives the respective Model data. As a reuslt, you can bind the fields through the <WidgetName>For() Helpers, as the Scheduler uses the MVVM Pattern internally to update the data in the views:

CustomEditorTemplate.cshtml
    @model MeetingViewModel

    <div class="k-edit-label">
        @(Html.LabelFor(model => model.Title))
    </div>
    <div data-container-for="title" class="k-edit-field">
        @(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))
    </div>

    <div class="k-edit-label">
        @(Html.LabelFor(model => model.Description))
    </div>
    <div data-container-for="description" class="k-edit-field">
        @(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))
    </div>

    <div class="k-edit-label">
        @(Html.LabelFor(model => model.RoomID))
    </div>
    <div data-container-for="RoomID" class="k-edit-field">
        @(Html.Kendo().DropDownListFor(model => model.RoomID)
            .DataTextField("Text")
            .DataValueField("Value")
            .ValuePrimitive(true)
            .BindTo(new[] {
                new { Text = "Meeting Room 101", Value = 1, Color = "\\#6eb3fa" },
                new { Text = "Meeting Room 201", Value = 2, Color = "\\#f58a8a" }
            })
        )
    </div>
C#
using Kendo.Mvc.UI;

public class MeetingViewModel : ISchedulerEvent
{
    public int MeetingID { get; set; }

    [Required]
    public string Title { get; set; }

    public string Description { get; set; }

    private DateTime start;
    [Required]
    public DateTime Start
    {
        get
        {
            return start;
        }
        set
        {
            start = value.ToUniversalTime();
        }
    }

    public string StartTimezone { get; set; }

    private DateTime end;

    [Required]
    [DateGreaterThan(OtherField = "Start")]
    public DateTime End
    {
        get
        {
            return end;
        }
        set
        {
            end = value.ToUniversalTime();
        }
    }

    public string EndTimezone { get; set; }
    public string RecurrenceRule { get; set; }
    public int? RecurrenceID { get; set; }
    public string RecurrenceException { get; set; }
    public bool IsAllDay { get; set; }
    public string Timezone { get; set; }
    public int? RoomID { get; set; }
}
Interface
namespace Kendo.Mvc.UI;

public interface ISchedulerEvent
{
    string Title { get; set; }
    string Description { get; set; }
    bool IsAllDay { get; set; }
    DateTime Start { get; set; }
    DateTime End { get; set; }
    string StartTimezone { get; set; }
    string EndTimezone { get; set; }
    string RecurrenceRule { get; set; }
    string RecurrenceException { get; set; }
}

Fields from the ISchedulerEvent interface are automatically mapped to camelCase fields on the client. Therefore, when the Scheduler uses a custom editor template, you must to bind the editors to the camelCase property names by using the data_bind attribute.

Fields that do not come from the ISchedulerEvent interface preserve their exact names. Therefore, when the editor template refers to such a field, it applies its exact name instead.

For a runnable example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository on how to implement a custom editor template similar to the built-in editor of the Scheduler.

Implementing Custom Editors for the Scheduler Events

Environment

Description

Solution

More ASP.NET MVC Scheduler Resources

See Also