How to hide Recurrence section of custom editor

2 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
    2172 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. UI for ASP.NET MVC is VS 2017 Ready
Back to Top