How to hide Recurrence section of custom editor

4 posts, 0 answers
  1. Edward
    Edward avatar
    29 posts
    Member since:
    Aug 2014

    Posted 10 Sep 2014 Link to this post

    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;
    }
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2186 posts

    Posted 11 Sep 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Erik
    Erik avatar
    4 posts
    Member since:
    Aug 2012

    Posted 8 hours ago in reply to Vladimir Iliev Link to this post

    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.
  4. Erik
    Erik avatar
    4 posts
    Member since:
    Aug 2012

    Posted 6 hours ago in reply to Erik Link to this post

    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();
      }
Back to Top