Model binding with custom editor template

[Michael]

I am having troubles binding my object that is sent back to the controller, here is the Model class i am binding to:

public class ScheduleAppoinment : ISchedulerEvent
   {
       public int Id { get; set; }

       public string Description { get; set; }

       public DateTime End { get; set; }

       public string EndTimezone { get; set; }

       public bool IsAllDay { get; set; }

       public string RecurrenceException { get; set; }

       public string RecurrenceRule { get; set; }

       public DateTime Start { get; set; }

       public string StartTimezone { get; set; }

       public string Title { get; set; }

       public string PatientName { get; set; }

       public int ResourceID { get; set; }

       public int ResourceCategoryID { get; set; }

       public int AppointmentType { get; set; }

       public string AppointmentName { get; set; }

       public int LocationID { get; set; }

       public int AppointmentCategoryID { get; set; }

       public int Duration { get; set; }

       public int PatientID { get; set; }

       public int AppointmentID { get; set; }
   }

Here is my custom editor template(All the kendo "For" controls bind to the model but the regular helpers (i.e (Html.TextBoxFor(model => model.PatientName))) do not bind to the model):

/*used to populate the patient name and ID*/
<div class="col-md-8">

    <button id="patientToggleBtn" type="button" onclick="togglePatientSearch()" class="k-button">Toggle Search</button>

</div>

<div id="patientSearch">

    <div class="col-md-4 editLabel">

        @Html.Label("First Name")

    </div>

    <div class="col-md-4 editContent">

        @Html.TextBox("firstName", 0, new { @class = "k-textbox" })

    </div>

 

    <div class="col-md-4 editLabel">

        @Html.Label("Last Name")

    </div>

 

    <div class="col-md-4 editContent">

        @Html.TextBox("lastName", 0, new { @class = "k-textbox" })

    </div>

    <div class="col-md-8">

        <button id="patientSearchBtn" type="button" onclick="getPatients()" class="k-button">Get Patients</button>

    </div>

 

 

 

    <div class="col-md-4 editLabel">

        @(Html.Label("Select Patient"))

    </div>

    <div class="col-md-4 editContent">

        @(Html.Kendo().DropDownList()

    .Name("PatientList")

    .DataTextField("FirstName")

    .DataValueField("PatientID")

    .AutoBind(false)

    .Events(e => e.Change("patientSelected"))

        )

    </div>

</div>

 /*end Patient get start of model binding*/

<div class="col-md-4 editLabel">

    @(Html.LabelFor(model => model.PatientName))

     

</div>

 

<div data-container-for="PatientName" class="col-md-4 editContent">

    @(Html.TextBoxFor(model => model.PatientName, new { @class = "k-invalid k-textbox", data_bind= "value:PatientName" }))/*won't bind to model */

   @

/* @Html.TextBox("PatientName", null, new Dictionary<string, Object> { { "data-bind","value:PatientName"} }) tried this 2*/

     

</div>

 

<div data-container-for="PatientID" >

    @(Html.HiddenFor(model => model.PatientID, new { data_bind = "value:PatientID" }))/*won't bind to model*/

</div>

 

 

   /*from here down bind to the model*/

 

    <div class="col-md-4 editLabel">

        @(Html.LabelFor(model => model.Duration))

    </div>

 

    <div data-container-for="Duration" class="col-md-4 editContent">

        @(Html.Kendo().NumericTextBoxFor(model => model.Duration)

    .Name("Duration")

    .HtmlAttributes(new { data_bind = "value:Duration" })

    .Format("\\#")

    .Min(10)

    .Max(30)

    .Value(10)

    .Step(10)

        )

 

    </div>

 

    <div class="col-md-4 editLabel">

        @(Html.LabelFor(model => model.Start))

 

    </div>

    <div data-container-for="start" class="col-md-4 editContent">

 

        @(Html.Kendo().DateTimePickerFor(model => model.Start)

        .Interval(10)

        .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))

 

        @*@(Html.Kendo().DatePickerFor(model => model.Start)

            .HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))*@

 

        <span data-bind="text: startTimezone"></span>

        <span data-for="start" class="k-invalid-msg"></span>

    </div>

 

    <div class="col-md-4 editLabel">

        @(Html.LabelFor(model => model.AppointmentCategoryID))

    </div>

    <div data-container-for="AppointmentCategoryID" class="col-md-4 editContent">

        @(Html.Kendo().DropDownListFor(model => model.AppointmentCategoryID)

        .Name("AppointmentCategoryID")

        .HtmlAttributes(new { data_bind = "value:AppointmentCategoryID", style = "width: 200px" })

        .OptionLabel("Select Appt Category")

        .Events(e => e.Change("apptCategoryChange"))

        .DataTextField("Text")

        .DataValueField("Value")

        .ValuePrimitive(true)

        .BindTo((IEnumerable<SelectListItem>)ViewBag.apptCats)

        .ToClientTemplate()

 

        )

    </div>

 

 

 

    <div class="col-md-4 editLabel">

        @(Html.LabelFor(model => model.AppointmentType))

    </div>

    <div data-container-for="AppointmentType" class="col-md-4 editContent">

        @(Html.Kendo().DropDownListFor(model => model.AppointmentType)

        .Name("AppointmentType")

        .HtmlAttributes(new { data_bind = "value:AppointmentType", style = "width: 200px" })

        .DataTextField("Text")

        .DataValueField("Value")

        .OptionLabel("Select Appt Type")

        .BindTo((IEnumerable<ApptType>)ViewBag.apptTypes)

        .ToClientTemplate()

        )

    </div>

 

    <div class=" col-md-4 editLabel">

        @(Html.LabelFor(model => model.ResourceCategoryID))

    </div>

    <div data-container-for="ResourceCategoryID" class="col-md-4 editContent">

        @(Html.Kendo().DropDownListFor(model => model.ResourceCategoryID)

        .Name("ResourceCategoryID")

        .HtmlAttributes(new { data_bind = "value:ResourceCategoryID", style = "width: 200px" })

                .Events(e => e.Change("resCategoryChange"))

        .OptionLabel("Select Resource")

        .DataTextField("Text")

        .DataValueField("Value")

        .ValuePrimitive(true)

        .BindTo((IEnumerable<SelectListItem>)ViewBag.resCats)

        .ToClientTemplate()

 

        )

    </div>

 

 

    <div class="col-md-4 editLabel">

        @(Html.LabelFor(model => model.ResourceID))

    </div>

    <div data-container-for="ResourceID" class="col-md-4 editContent">

        @(Html.Kendo().DropDownListFor(model => model.ResourceID)

        .Name("ResourceID")

        .HtmlAttributes(new { data_bind = "value:ResourceID", style = "width: 200px" })

        .DataTextField("Text")

        .DataValueField("Value")

        .OptionLabel("Select Appt Resource")

        .BindTo((IEnumerable<ApptType>)ViewBag.resTypes)

        .ToClientTemplate()

        )

    </div>

 

  

here is my scheduler initialization:

@(Html.Kendo().Scheduler<Scheduler.Models.ScheduleAppoinment>()
    .Name("scheduler")
    .Date(DateTime.Today)
    .StartTime(new DateTime(2013, 6, 13, 00, 00, 00))
    .EndTime(new DateTime(2013, 6, 13, 23, 00, 00))
    .AllDaySlot(false)
    .Events(e => e.Save("editSave"))
    .Editable(editable =>
    {
        editable.TemplateName("CustomEditorTemplate");
    })
    .Height(600)
    .Views(views =>
    {
        views.DayView();
        views.WeekView(week => week.Selected(false));
        views.MonthView();
        views.AgendaView(agenda => agenda.Selected(true).EventTemplateId("customAgendaTemplate"));
    })
    .Resources(resource =>
    {
        resource.Add(m => m.ResourceID)
            .Title("Doctors")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .DataSource(d => d.Read("GetResourceDoctors", "Home"));
    })
    .DataSource(d => d
    .Model(m =>
    {
        m.Id(f => f.Id);
        m.Field(f => f.Start);
        m.Field(f => f.End);
        m.Field(f => f.Title);
        m.Field(f => f.AppointmentType);
        m.Field(f => f.AppointmentName);
        m.Field(f => f.PatientName);
        m.Field(f => f.ResourceID);
        m.Field(f => f.ResourceCategoryID);
        m.Field(f => f.Duration).DefaultValue(10);
        m.Field(f => f.AppointmentID);
        m.Field(f => f.AppointmentCategoryID);
        m.Field(f => f.PatientName);
        m.Field(f => f.LocationID);

    })
        .Read("GetAllAppointments", "Home")
        .Update("RescheduleAppointment", "Home")
        .Destroy("CancelAppointment","Home")
        .Create("ScheduleAppointment", "Home")
        .Events(e =>
        {
            e.Error("error");
        })
    )
)

The main thing I need to know is how do I get TextBoxFor and HiddenFor Helpers to bind to the Model like Kendos Helpers.

Thanks in advance,

Mike

[Vladimir Iliev]

Hello,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please modify this demo to reproduce the issue and send it back to us? This would help us pinpoint the exact reason for this behavior.

Regards,
Vladimir Iliev
Telerik

 

 

[Michael]

I have modified the custom editor project to replicate the problem. I have created a drop down that populates the title and a hidden field for the meeting ID.

I also made the text box read only so the user has to populate it from the drop down, which is my intended use.

When you click Save after using the drop down the Title is empty and the meeting ID is still 0.

Thanks in advance,

 Mike

[Michael]

P.S. I had to remove the kendo mvc library to get it under 2 mb.

[Vladimir Iliev]

Hi Michael,

Thank you for the provided project.

After inspecting the project it appears that the "title" field is correctly bind to the underlying model, however the "titleSelected" function is not updating it correctly. Please check the updated function below:

function titleSelected() {
    var title = this.text();
    var id = this.value();

    var titleTextBox = $('input[name = "Title"]');

    titleTextBox.val(title).trigger("change");
}

Also a better approach would be to update the underlying model directly:

function titleSelected() {
    var title = this.text();
    var id = this.value();
    var modelUID = this.wrapper.closest(".k-scheduler-edit-form").data("uid");
    var scheduler = $("#scheduler").data("kendoScheduler");
    var model = scheduler.dataSource.getByUid(modelUID);
    model.set("title", title);
}

Regards,
Vladimir Iliev
Telerik