Clicking on item in DropDownList in a Grid Popup Editor causes a javascript "undefined" error. Attached are screen shots from the Chrome debugger. Relevant code is below:
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using TelerikTest.Models;
using System.Net.Http;
using Newtonsoft.Json;
using System.Text;
using System.IO;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
namespace TelerikTest.Controllers {
public class PeopleController : Controller {
public PeopleController() {
}
private List<Person> InitPersons() {
var persons = new List<Person>();
persons.Add(new Person() { Id = 1, FirstName = "Joe", LastName = "Smith", JobTitle = "President", Street = "409 State St.", City = "Chicago", State = "IL", Zip = "60606" });
persons.Add(new Person() { Id = 2, FirstName = "Bob", LastName = "Brown", JobTitle = "Vice President", Street = "1200 Fifth Ave.", City = "New York", State = "NY", Zip = "10005" });
return persons;
}
public IActionResult Index() {
var persons = InitPersons();
return View(persons);
}
public IActionResult EditForms(int id) {
var persons = InitPersons();
var person = persons.Single(x => x.Id == id);
ViewData["name"] = person.LastName;
var cfi = new List<CategoryFormItem>();
cfi.Add(new CategoryFormItem() { id = 1, category = "Medical", form = "Medical Conditions" });
cfi.Add(new CategoryFormItem() { id = 2, category = "Medical", form = "Physical" });
cfi.Add(new CategoryFormItem() { id = 3, category = "Permission", form = "Participation" });
cfi.Add(new CategoryFormItem() { id = 4, category = "Permission", form = "Travel" });
cfi.Add(new CategoryFormItem() { id = 5, category = "Incident", form = "Behavior" });
cfi.Add(new CategoryFormItem() { id = 6, category = "Incident", form = "Injury" });
var cf = new List<CategoryForm>();
foreach (var f in cfi) {
var c = new CategoryForm();
c.id = f.id;
c.cf = $"{f.category}: {f.form}";
cf.Add(c);
}
ViewData["categoryforms"] = cf;
var pforms = new List<PersonFormViewModel>();
var vmForm = new PersonFormViewModel() { id = 1, category = "Medical", formId = 1, name = "Physical", personId = id, received = DateTime.Today, remarks = "Required physical" };
pforms.Add(vmForm);
return View(pforms);
}
public IActionResult CreateForm([DataSourceRequest]DataSourceRequest request, [FromForm] PersonFormViewModel vm) {
return Json(new[] { vm }.ToDataSourceResult(request, ModelState));
}
public IActionResult UpdateForm([DataSourceRequest]DataSourceRequest request, PersonFormViewModel vm) {
return Json(new[] { vm }.ToDataSourceResult(request, ModelState));
}
public IActionResult DeleteForm([DataSourceRequest]DataSourceRequest request, PersonFormViewModel vm) {
return Json(new[] { vm }.ToDataSourceResult(request, ModelState));
}
}
}
@model IEnumerable<TelerikTest.Models.PersonFormViewModel>
@using Kendo.Mvc.UI
@section Scripts {
<script type="text/javascript">
function onDataBound() {
var btn = $("#addPeopleForm").data("kendoButton");
if (btn == undefined) {
$("#addPeopleForm").kendoButton({
icon: "plus",
click: function (e) {
e.preventDefault();
var grid = $('#gridPersonForms').data('kendoGrid');
grid.addRow();
}
});
}
};
</script>
}
<div class="text-center">
<h1 class="display-4">@ViewData["name"]</h1>
</div>
<div>
@(Html.Kendo().Grid<PersonFormViewModel>(Model)
.Name("gridPersonForms")
.Columns(columns => {
columns.Bound(c => c.id).Hidden();
columns.Bound(c => c.personId).Hidden();
columns.Bound(c => c.formId).Hidden();
columns.Bound(c => c.category).Hidden().ClientGroupHeaderTemplate("#= value #");
columns.Bound(c => c.catfrm).Hidden();
columns.Bound(c => c.name).Width(100).Title("Form");
columns.Bound(c => c.received).Width(60).Title("Date Received");
columns.Bound(c => c.remarks).Title("Remarks");
columns.Command(c => { c.Edit(); c.Destroy(); }).Width(250).ClientHeaderTemplate("<button id='addPeopleForm'>Add New Form Receipt</button>");
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AddPeopleForm"))
.Events(e => e.DataBound("onDataBound"))
.Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.DataSource(dataSource => dataSource
.Ajax()
.Model(m => m.Id(p => p.id))
.Create("CreateForm", "People")
.Update("UpdateForm", "People")
.Destroy("DeleteForm", "People")
.Group(g => g.Add(x => x.category))
.ServerOperation(false)
)
)
</div>
using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
namespace TelerikTest.Models {
public class PersonFormViewModel {
public int id { get; set; }
public int personId { get; set; }
public int formId { get; set; }
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString ="{0:MM/dd/yyyy}")]
[DataType(DataType.Date)]
[DisplayName("Date Received")]
public DateTime received { get; set; }
[DisplayName("Remarks")]
public string remarks { get; set; }
public string category { get; set; }
public string name { get; set; }
[UIHint("CategoryFormEditor")]
[DisplayName("Category: Form")]
public CategoryForm catfrm { get; set; }
public PersonFormViewModel() {
}
}
}
@model TelerikTest.Models.PersonFormViewModel
<div class="k-edit-form-container">
@Html.HiddenFor(m => m.id)
@Html.HiddenFor(m => m.personId)
@Html.HiddenFor(m => m.formId)
<div class="k-edit-label">
@Html.LabelFor(model => model.catfrm)
</div>
<div class="k-edit-field">
@Html.EditorFor(model => model.catfrm)
@Html.ValidationMessageFor(model => model.catfrm)
</div>
<div class="k-edit-label">
@Html.LabelFor(model => model.received)
</div>
<div class="k-edit-field">
@Html.EditorFor(model => model.received)
@Html.ValidationMessageFor(model => model.received)
</div>
<div class="k-edit-label">
@Html.LabelFor(model => model.remarks)
</div>
<div class="k-edit-field">
@Html.EditorFor(model => model.remarks)
@Html.ValidationMessageFor(model => model.remarks)
</div>
</div>
@using Kendo.Mvc.UI
@(Html.Kendo().DropDownList()
.Name("catfrm")
.DataValueField("id")
.DataTextField("cf")
.BindTo((System.Collections.IEnumerable) ViewData["categoryforms"])
)
using System;
namespace TelerikTest.Models {
public class CategoryForm {
public int id { get; set; }
public string cf { get; set; }
public CategoryForm() {
}
}
public class CategoryFormItem {
public int id { get; set; }
public string category { get; set; }
public string form { get; set; }
public CategoryFormItem() {
}
}
}