How do I set the value of a Kendo Text Box and pass that value to the controller so the model is valid?

Question

I'm setting the value of a Kendo Text Box For in Javascript, having that value displayed on the screen, but getting an error that the field is null and the model state invalid when it gets to the controller. How do I set the value of the text box and retain that value so the model state is valid?

Here's what I have:

• ASP.net MVC Visual Studio project with C#
• Kendo/Telerik Scheduler Control
• Event pop-up of the Scheduler defined in template (separate CSHTML file)
• In the template, a Kendo TextBoxForControl for the field Title
• Also in the template, a Kendo drop down list for the field TaskSourceWoId

When a user selects a value from the dropdown, Javascript sets the value of the Title like this:

$("#Title").val("WO# " + workOrderID);

The text displays on the screen (see the screenshots below). However, when the user clicks the save button, they get an error that Title can't be blank. If I look in the controller for the method that's hit when the user clicks save, I can see that in the model that Title is indeed null and this is causing the model state to be invalid. I added Javascript to get the value of Title immediately after just setting it using the code above and it's null.

I've tried several different ways of setting Title in the javascript; mostly along the lines of something like this:

alert($("#Title").data("kendoTextBox").value());

and it returns a "not found" error.

So how do I set Title in a way that it not only appears on the screen, but will be recognized by the controller and not have the model state invalid?

Here's the event pop-up window when it first opens. Note the Title is blank at this point:

After a work order is selected from a drop down, the Title is set to include this value and Title now has a value on the screen:

$("#Title").val("WO# " + workOrderID);

However, when the user clicks save and the code goes to the controller, the Model State is not valid and the value of Title is null:

This is the code for the scheduler:

@(Html.Kendo().Scheduler<SchedTasksModel>()
       .Name("scheduler")
       .Date(DateTime.Today)
       .StartTime(DateTime.Parse(string.Format("{0} {1}", DateTime.Today.ToShortDateString(), "07:00")))
       .Height(600)
       .Views(views =>
       {
             views.DayView();
             views.WeekView(weekView => weekView.Selected(true));
             views.MonthView();
             views.AgendaView();
       })
       .Editable(editable => editable.TemplateName("KoorsenEditor"))
       .Timezone("Etc/UTC")
       .Events(e => { e.Edit("sched_edit"); })
       .Resources(resource =>
       {
            resource.Add(m => m.TaskType)
                    .Title("Type")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .DataColorField("Color")
                    .BindTo(new[]
                    {
                          new {Text = "Work Order", Value = 1, Color = "#6eb3fa"},
                          new {Text = "Event", Value = 2, Color = "#f58a8a"}
                    });

            resource.Add(m => m.TaskSourceId)
                    .Title("Wo")
                    .DataTextField("Name")
                    .DataValueField("Id")
                    .DataSource(ds => ds.Read(read => read.Action("GetSchedWo", "Sched", new { userID = ViewBag.CurrUser, userType = ViewBag.CurrUsrType })));

            resource.Add(m => m.TaskSourceEvtId)
                    .Title("Evt")
                    .DataTextField("Name")
                    .DataValueField("Id")
                    .BindTo(new[]
                     {
                         new {Name = "Meeting", Id = 1},
                         new {Name = "Vacation", Id = 2},
                         new {Name = "Sick Time", Id = 3},
                         new {Name = "Other", Id = 4}
                      });
            resource.Add(m => m.TaskResId)
                    .Title("Res")
                    .DataTextField("Name")
                    .DataValueField("Id")
                    .DataSource(ds => ds.Read(read => read.Action("GetTechRes", "Sched")));
                      })
                    .DataSource(d => d.Model(m =>
                    {
                          m.Id(f => f.TaskId);
                          m.Field(f => f.Title).DefaultValue("");
                          m.Field(f => f.TaskType).DefaultValue(1);
                          m.RecurrenceId(f => f.RecurrenceId);
                    })
                    .Events(e =>
                     {
                          e.Error("error_handler");
                          e.Sync("onSchedulerSync");
                     })
                     .Create("WrkOrdTasksCreate", "Sched")
                     .Read("WrkOrdTasksRead", "Sched")
                     .Update("WrkOrdTasksUpdate", "Sched")
                     .Destroy("WrkOrdTasksDestroy", "Sched")
                     .Filter(filters => filters.Add(model => model.TaskResId).IsNotEqualTo(0))
                      ))

Editor.cshtml defining the text box

@(Html.TextBoxFor(model => model.Title, new {@class = "k-textbox", data_bind = "value:title"}))

Javascript setting the value of the title field

function onWorkOrderChange(e) {
    try {
        var workOrderID = $("#TaskSourceWoId").data("kendoDropDownList").value();
        if ($("#Title").val() == "") {
            $("#Title").val("WO# " + workOrderID);
        }
    } catch (ex) {
        alert(ex);
    }
}

Answer 1

Heard back from Telerik. Their response was:

In order to notify the model for the automatically assigned Title value, you will have to trigger the change event of the Title field

For the text box, I just added change() to the end of the assignment:

$("#Title").val("WO# " + workOrderID).change();

That didn't work for the drop down list. I finally found the syntax for it on another StackOverflow page: here

So in my case, the code that work for the drop down list was:

$("#TaskResId").data("kendoDropDownList").value('@ViewBag.CurrUser');
$("#TaskResId").data("kendoDropDownList").trigger("change");