This is a migrated thread and some comments may be shown as answers.

Additional Textbox/Checkbox fields in Scheduler

5 Answers 75 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 20 Dec 2017, 06:46 PM

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.


5 Answers, 1 is accepted

Sort by
0
Simon
Top achievements
Rank 1
answered on 20 Dec 2017, 06:59 PM

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? 

 

0
Simon
Top achievements
Rank 1
answered on 20 Dec 2017, 07:02 PM

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?

0
Simon
Top achievements
Rank 1
answered on 20 Dec 2017, 07:02 PM
Sorry for double post...
0
Simon
Top achievements
Rank 1
answered on 21 Dec 2017, 02:40 PM

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...

 

0
Dimitar
Telerik team
answered on 22 Dec 2017, 11:20 AM
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.
Tags
Scheduler
Asked by
Simon
Top achievements
Rank 1
Answers by
Simon
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or