Additional Textbox/Checkbox fields in Scheduler

6 posts, 0 answers
  1. Simon
    Simon avatar
    27 posts
    Member since:
    Mar 2016

    Posted 20 Dec 2017 Link to this post

    Hi, I've looked through all the similar support questions and answers regarding adding custom fields to the Scheduler Editor. I've downloaded the sample MVC projects (SchedulerCustomViewDemo) and it looks straightforward. I'm missing something basic because I cannot get a custom text field or check box to populate the Model when editing a Scheduled Event or creating a new one. I've added the fields to the database, refreshed the EF6 edmx, and added them to my ViewModel. Since these fields are not populated in the model, they don't get saved to the db on create or edit. 

    For example i have a textarea field called Summary that I add to the editor by modifying the CustomEditorTemplate.html (I just copied CustomEditorTemplate.html into my project, leaving all fields as they were and adding my own):

     

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

    for a checkbox I do this:

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

    These new fields show up fine but how do i get these bound to the model so that the call to:

    public virtual JsonResult EventSchedule_Create([DataSourceRequest] DataSourceRequest request, EventScheduleViewModel evt)

     

    fills the EventScheduleViewModel properly?

     

    Love the way theScheduler handles the recurring events but stymied on the databinding. The fields that came in the sample project (Title, Start, End, isAllDay etc. bind properly, just not my custom ones...

     

    Thanks.


  2. Simon
    Simon avatar
    27 posts
    Member since:
    Mar 2016

    Posted 20 Dec 2017 Link to this post

    My EventScheduleViewModel implements ISchedulerEvent:

     

    public class EventScheduleViewModel : ISchedulerEvent

     

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

     

    I suspect this is why my custom fields do not get databound? 

     

  3. Simon
    Simon avatar
    27 posts
    Member since:
    Mar 2016

    Posted 20 Dec 2017 Link to this post

    My ViewModel class implements ISchedulerEvent:

     

    public class EventScheduleViewModel : ISchedulerEvent

     

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

     

    These interface properties are databound correctly but not my custom ones - can this be achieved?

  4. Simon
    Simon avatar
    27 posts
    Member since:
    Mar 2016

    Posted 20 Dec 2017 Link to this post

    Sorry for double post...
  5. Simon
    Simon avatar
    27 posts
    Member since:
    Mar 2016

    Posted 21 Dec 2017 Link to this post

    Apparently it's a case sensitivity issue.

    This doesn't bind:

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

    This does:

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

    For my Summary property:

     

            [Required(ErrorMessage = "Event Summary is a required field.")]
            [StringLength(250, ErrorMessage = "Summary cannot exceed 250 characters.")]
            [Display(Name = "Event Summary")]
            public string Summary { get; set; }

     

    However the properties of the ISchedulerEvent interface start with a capital but this binds to the model:

     

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

     

    But this doesn't:

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

    Ignore case in these scenarios would be great...

     

  6. Dimitar
    Admin
    Dimitar avatar
    450 posts

    Posted 22 Dec 2017 Link to this post

    Hello Simon,

    I am glad to see that you have managed to resolve the issue.

    The described behavior is due to the schema configuration of the Scheduler:
    .DataSource(d => d
    .Custom()
    .Batch(true)
    .Schema(schema => schema
    .Model(m => {
    m.Id(f => f.MeetingID);
    m.Field("title", typeof(string)).DefaultValue("No title").From("Title");
    m.Field("start", typeof(DateTime)).From("Start");
    m.Field("end", typeof(DateTime)).From("End");
    m.Field("description", typeof(string)).From("Description");
    m.Field("recurrenceID", typeof(int)).From("RecurrenceID");
    m.Field("recurrenceRule", typeof(string)).From("RecurrenceRule");
    m.Field("recurrenceException", typeof(string)).From("RecurrenceException");
    m.Field("isAllDay", typeof(bool)).From("IsAllDay");
    m.Field("startTimezone", typeof(string)).From("StartTimezone");
    m.Field("endTimezone", typeof(string)).From("EndTimezone");
    }))          
    )

    You will notice that in the above code snippet, the memberName parameter is defined as "title" with lowercase. Thus, when binding it, the corresponding name have to be used.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top