Change width of labels in scheduler edit popup

[Andrea]

I'm using the html helpers to configure the scheduler. Little by little, there have been more changes that I wasn't able to do with the html helper.

I've opted to use the edit event of the widget. During the event, the Disclaimer and SystemSoftwareVersion rows are added as well as the scrollbar on the side. Additionally, the Device drop-down is disabled conditionally.

The last thing left to do is to give the labels more space as the line wrapping for System Software Version is undesireable and only gets worse when viewed on mobile.

I know I can:

• Continue adding on to the edit event and customize there
• Create a template for the edit window

Both these options aren't ideal as I'd much prefer not messing with the DOM to this extent in the edit event. Since I haven't worked with templates before however, switching over to that option is daunting.

What are my options here? Am I overlooking something? If I wanted to start using templates for the edit window - how do I get started?

[Aleksandar]

Hi Andrea,

To use a Custom Editor for the scheduler, and show additional fields you can define a model implementing the ISchedulerEvent interface, with the desired additional fields:

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

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

        public string StartTimezone { get; set; }

        private DateTime end;

        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 SoftwareVersion { get; set; }
    }

Then you need to create a custom Editor Template and add the editors desired for those fields. Define a Custom editor template and place it in the EditorTemplates folder and configure the Scheduler to use it:

@(Html.Kendo().Scheduler<Scheduler_CustomEditor.Models.MeetingViewModel>()
            .Name("scheduler")
            .Editable(e => e.TemplateName("CustomEditorTemplate"))
...
)

CustomEditorTemplate.cshtml:

@model Scheduler_CustomEditor.Models.MeetingViewModel
@functions{
    public Dictionary<string, object> generateDatePickerAttributes(
           string elementId,
           string fieldName,
           string dataBindAttribute,
           Dictionary<string, object> additionalAttributes = null)
    {

        Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

        datePickerAttributes["id"] = elementId;
        datePickerAttributes["name"] = fieldName;
        datePickerAttributes["data-bind"] = dataBindAttribute;
        datePickerAttributes["required"] = "required";
        datePickerAttributes["style"] = "z-index: inherit;";

        return datePickerAttributes;
    }
}


<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.Start))
</div>
<div data-container-for="start" class="k-edit-field">

    @(Html.Kendo().DateTimePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))

    @(Html.Kendo().DatePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))

    <span data-bind="text: startTimezone"></span>
    <span data-for="start" class="k-invalid-msg"></span>
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.End))
</div>
<div data-container-for="end" class="k-edit-field">

    @(Html.Kendo().DateTimePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDateTime",
            "end",
            "value:end,invisible:isAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))

    @(Html.Kendo().DatePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDate",
            "end",
            "value:end,visible:isAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))

    <span data-bind="text: endTimezone"></span>
    <span data-for="end" class="k-invalid-msg"></span>
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.IsAllDay))
</div>
<div data-container-for="isAllDay" class="k-edit-field">
    <input data-bind="checked: isAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" />
</div>


<div class="k-edit-label">
    <label for="timezone">Timezone</label>
</div>
<div data-container-for="timezone" class="k-edit-field">
    <a name="timezone" class="k-button" data-bind="invisible:isAllDay">Time zone</a>
</div>

<div class="k-popup-edit-form k-scheduler-edit-form k-scheduler-timezones" style="display:none">
    <div class="k-edit-form-container">
        <div class="k-edit-field"><label class="k-check"><input class="k-timezone-toggle" type="checkbox">Use separate start and end time zones</label></div>
        <div class="k-edit-label"><label for="startTimezone">Start timezone</label></div>
        <div data-container-for="startTimezone" class="k-edit-field">
            <div data-bind="value:startTimezone" name="startTimezone" data-role="timezoneeditor" style="display: block;">
            </div>
        </div>
        <div class="k-edit-label"><label for="endTimezone">End timezone</label></div>
        <div data-container-for="endTimezone" class="k-edit-field">
            <div data-bind="value:endTimezone" name="endTimezone" data-role="timezoneeditor" style="display: block;">
            </div>
        </div>
        <div class="k-edit-buttons k-state-default"><a class="k-button k-scheduler-savetimezone" href="\\#">Save</a><a class="k-button k-scheduler-canceltimezone" href="\\#">Cancel</a></div>
    </div>
</div>

<div class="k-edit-label">
    @(Html.LabelFor(model => model.RecurrenceRule))
</div>
<div data-container-for="recurrenceRule" class="k-edit-field">
    @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
        .HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
</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.SoftwareVersion))
</div>
<div data-container-for="SoftwareVersion" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.SoftwareVersion)
        .HtmlAttributes(new { data_bind = "value:SoftwareVersion"})
        .DataTextField("Text")
        .DataValueField("Value")
        .OptionLabel("None")
        .ValuePrimitive(true)
        .Filter(FilterType.Contains)
        .DataSource(ds=>ds.Read(r=>
                r.Action("GetVersions","Scheduler"))
            .ServerFiltering(true)
            )
        .ToClientTemplate()
    )
</div>

In the example above and for the Default editor you can change the width of the labels and the width of the editor fields using CSS:

.k-scheduler-edit-form .k-edit-label {
    width: 30%;
}
.k-scheduler-edit-form .k-edit-field {
    width: 60%;
}

I hope this helps.

Regards,
Aleksandar
Progress Telerik