How to hide Recurrence section of custom editor

[Edward]

I've incorporated a custom editor by using a project found on a forum post.  I needed to add custom controls.  When you don't use a custom editor the built in editor hides the recurrence section when you select Edit Current Occurrence.  How can determine if the user selected Edit Current Occurrence so I can hide the recurrence section?

Here is my template:

@model GIS.Services.Pulse.Types.Models.TaskAsset
@{
    //required in order to render validation attributes
    ViewContext.FormContext = new FormContext();
}

@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-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-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 id="is-all-day" data-bind="checked: isAllDay" data-val="true" id="isAllDay" name="isAllDay" type="checkbox" />
</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">
    Asset
</div>
<div data-container-for="AssetID" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.AssetID)
        .HtmlAttributes(new { data_bind = "value:AssetID", style = "width: 400px" })
        .DataTextField("Name")
        .DataValueField("AssetID")
        .OptionLabel("Select")
        .ValuePrimitive(true)
        .DataSource(ds => ds.Read("Assets", "Asset"))
        .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Owner
</div>
<div data-container-for="OwnerID" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.OwnerID)
          .HtmlAttributes(new { data_bind = "value:OwnerID", style = "width: 400px" })
          .DataTextField("DisplayName")
          .DataValueField("UserID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("Users", "Users"))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Work Type
</div>
<div data-container-for="WorkTypeID" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.WorkTypeID)
          .HtmlAttributes(new { data_bind = "value:WorkTypeID", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("WorkTypeID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("WorkTypes", "MaintenanceSchedule"))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Duration Freq
</div>
<div data-container-for="DurationFreq" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.DurationFreq)
          .HtmlAttributes(new { data_bind = "value:DurationFreq", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("ID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("Frequency", "UnitOfMeasure"))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Duration UOM
</div>
<div data-container-for="DurationUomId" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.DurationUomId)
          .HtmlAttributes(new { data_bind = "value:DurationUomId", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("UnitOfMeasureID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("UnitOfMeasures", "UnitOfMeasure", new { type = 1 }))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Grace Period Freq
</div>
<div data-container-for="GraceFreq" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.GraceFreq)
          .HtmlAttributes(new { data_bind = "value:GraceFreq", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("ID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("Frequency", "UnitOfMeasure"))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Grace Period UOM
</div>
<div data-container-for="GraceUomId" class="k-edit-field">
    @(Html.Kendo().DropDownListFor(model => model.GraceUomId)
          .HtmlAttributes(new { data_bind = "value:GraceUomId", style = "width: 400px" })
          .DataTextField("Name")
          .DataValueField("UnitOfMeasureID")
          .OptionLabel("Select")
          .ValuePrimitive(true)
          .DataSource(ds => ds.Read("UnitOfMeasures", "UnitOfMeasure", new { type = 1 }))
          .ToClientTemplate()
    )
</div>

<div class="k-edit-label">
    Color
</div>
<div data-container-for="Color" class="k-edit-field">
    @(Html.Kendo().ColorPicker()
        .Name("Color")
        .Value("f0d0c9")
        .HtmlAttributes(new { data_bind = "value:Color" })
        .TileSize(s => s.Width(34).Height(19))
        .Palette(new string[] {
            "f0d0c9", "e2a293", "d4735e", "65281a",
            "eddfda", "dcc0b6", "cba092", "7b4b3a",
            "fcecd5", "f9d9ab", "f6c781", "c87d0e",
            "e1dca5", "d0c974", "a29a36", "514d1b",
            "c6d9f0", "8db3e2", "548dd4", "17365d"
        })
     )
</div>

@{
    ViewContext.FormContext = null;
}

[Vladimir Iliev]

Hi Matt,

You can use the following check against the edited event to see if the "RecurrenceEditor" should be removed:

if (event.isNew() && event.recurrenceId) {
   //remove the recurrence editor
}

You can use the above check for example in "Edit" event handler as demonstrated below:

function edit(e) {
    var event = e.event;
    if (event.isNew() && event.recurrenceId) {
        //remove the recurrence editor
    }

Regards,
Vladimir Iliev
Telerik

 

 

[Erik]

Can you explain how to actually remove the recurrence editor from the edit function? The custom template is separate from that function so I am not sure how to "link" the two.

[Erik]

I was able to achieve this by the following..but please let me know if there is a better way

function onEdit(e) {
  var event = e.event;
  if (event.isNew() && event.recurrenceId) {
     //remove the recurrence editor
     e.container.find("[data-role=recurrenceeditor]").hide();
     $('label[for="recurrenceRule"]').hide();
  }

[Ivan Danchev]

Hello Erik,

We are glad you were able to find a solution. This is the correct approach for hiding the recurrence editor and its label.

Regards,
Ivan Danchev
Telerik by Progress