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

Clicking on item in DropDownList in a Grid Popup Editor causes a javascript "undefined" error

8 Answers 214 Views

Grid

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

Tom asked on 23 Dec 2019, 01:56 AM

screenshot13c9d1cabf0e64ef1a7e1fef75f4da9e4.jpg

screenshot24830036160f744a9b3e9fbfa26d7387a.jpg

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() {
}
}
}

8 Answers, 1 is accepted

answered on 25 Dec 2019, 10:27 AM

Hi Tom,

I have investigated the provided code snippets and screenshots. The screenshot that depicts the error indicates that the name of the DropDownList is "catfrm.catfrm". In general, this issue is encountered when the EditorTemplate of the respective field is a plain widget with the .Name option set.

What I can recommend is that you alternate this editor to use the DropDownListFor(m=>m.catfrm) syntax. Also, remove the .Name option.

Let me know in case the issue persists.

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.

answered on 26 Dec 2019, 11:20 AM

kendo-grid-popup-editor.zip

Hi Tom,

Based on the information, I have created a sample project that demonstrates a custom PopUp editor template with a DropDownList within. Is it possible for you to modify the attached project in order to replicate the faulty behavior and send it back to me?

Thank you for your cooperation in advance.

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.

answered on 26 Dec 2019, 10:46 PM

Yes.Here are the modifications:

Index.cshtml

@{
ViewData["Title"] = "Home Page";
}

<div class="row">
<div class="col-xs-18 col-md-12">
@(Html.Kendo().Grid<Sample.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity);
columns.Bound(p => p.Category).ClientTemplate("#=customTemplate(data)#");
columns.Command(cmd => cmd.Edit());
})
.Pageable()
.Sortable()
.Scrollable()
.ToolBar(tb=>tb.Create())
.Filterable()
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditOrder"))
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => {
model.Id(p => p.OrderID);
//model.Field(f => f.Category.CategoryName).DefaultValue(new Sample.Models.CategoryViewModel() { CategoryName = "cate2"}) ;
//model.Field(p => p.OrderID).DefaultValue(new { Name="name1", OrderID=1 });
})
.Read(read => read.Action("Orders_Read", "Grid"))
.Update(up => up.Action("Orders_Update", "Grid"))
)
)
</div>
</div>
<script>
function customTemplate(dataItem){
if (dataItem.Category) {
return dataItem.Category.CategoryName;
} else {
return '';
}
}
</script>

OrderViewModel.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace Sample.Models
{
public class OrderViewModel
{
public int OrderID
{
get;
set;
}

[UIHint("EditPosition")]
public CategoryViewModel Category { get; set; }

public decimal? Freight
{
get;
set;
}

[Required]
public DateTime? OrderDate
{
get;
set;
}

public string ShipCity
{
get;
set;
}

public string ShipName
{
get;
set;
}
}
}

EditOrder.cshtml

answered on 26 Dec 2019, 10:50 PM

Sorry, cut and pasted the wrong code for EditOrder.cshtml. Here's the correct code:

EditOrder.cshtml

@model Sample.Models.OrderViewModel

<div class="k-edit-form-container">
<div class="k-edit-label">
@Html.LabelFor(model => model.OrderID)
</div>
<div class="k-edit-field">
@Html.EditorFor(model => model.OrderID)
@Html.ValidationMessageFor(model => model.OrderID)
</div>

<div class="k-edit-label">
@Html.LabelFor(model => model.Category)
</div>
<div class="k-edit-field">
@Html.EditorFor(model => model.Category)
@Html.ValidationMessageFor(model => model.Category)
</div>

<div class="k-edit-label">
@Html.LabelFor(model => model.Freight)
</div>
<div class="k-edit-field">
@Html.EditorFor(model => model.Freight)
@Html.ValidationMessageFor(model => model.Freight)
</div>

<div class="k-edit-label">
@Html.LabelFor(model => model.OrderDate)
</div>
<div class="k-edit-field">
@Html.EditorFor(model => model.OrderDate)
@Html.ValidationMessageFor(model => model.OrderDate)
</div>

<div class="k-edit-label">
@Html.LabelFor(model => model.ShipCity)
</div>
<div class="k-edit-field">
@Html.EditorFor(model => model.ShipCity)
@Html.ValidationMessageFor(model => model.ShipCity)
</div>

<div class="k-edit-label">
@Html.LabelFor(model => model.ShipName)
</div>
<div class="k-edit-field">
@Html.EditorFor(model => model.ShipName)
@Html.ValidationMessageFor(model => model.ShipName)
</div>
</div>

answered on 27 Dec 2019, 12:05 PM

kendo-grid-example-modified.zip

Hi Tom,

Thank you for the provided code snippets. I have investigated the scenario and the binding of the DropDownList editor to the corresponding field is not correct. In the specific case, what I can recommend is that you alternate the DropDownList editor template to the following one:

@model Sample.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m=>m)
    .DataTextField("CategoryName")
    .DataValueField("ID")
    .BindTo(new[] { new { CategoryName="CategoryName 1", ID = 1 }, new {CategoryName="CategoryName 2", ID=2 } }))

Check out the attached modified project to my response.

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.

Accepted