Upon saving and clearing all validation steps with a pop-up template, I get the following error:
VM5294:3 Uncaught TypeError: Cannot read property 'PatientId' of null
at Object.eval [as PatientId] (eval at getter (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:25:30967), <anonymous>:3:10)
at y (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:627)
at init.data (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:982)
at init._accept (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:27729)
at Object.<anonymous> (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:26672)
at Object.<anonymous> (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:28768)
at i (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:27449)
at Object.fireWith [as resolveWith] (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:28213)
at Object.e.(anonymous function) [as resolve] (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:2:29192)
at Object.success (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:27:29810)
What's interesting is that DELETE functions work but not Update Create
Here is my code for the grid
@using AccuChart.Controllers;
@using AccuChart.Models;
@using AccuChart.ViewModels;
@model PatientViewModel
@{
ViewBag.Title = "Patients";
}
<h3>Patients</h3>
@(Html.Kendo().Grid(Model.Patients)
.Name("patientGrid")
.Columns(columns =>
{
columns.Bound(p => p.FirstName).Title("First Name").Filterable(true);
columns.Bound(p => p.LastName).Title("Last Name").Filterable(true);
columns.Bound(p => p.PatientId).Visible(false);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_Patient")
.Window(w => w.Title("Edit Patient").Name("Patient"))
)
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(3))
.Sortable()
.Scrollable()
//.HtmlAttributes(new { style = "height:550px;" })
.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
.DataSource(dataSource => dataSource
.Ajax().ServerOperation(false)
.PageSize(20)
.Model((model => model.Id(patient => patient.PatientId)))
.Read(read => read.Action("GetPatients", "Patient"))
.Create(create => create.Action("EditingPopup_Create", "Patient"))
.Update(update => update.Action("EditingPopup_Update", "Patient"))
.Destroy(delete => delete.Action("EditingPopup_Delete", "Patient"))
.Events(e =>
{
e.RequestEnd("onGridDataSourceRequestEnd");
e.Error("onError");
})
.Sort(sort => sort.Add("FullName"))
)
)
<script type="text/javascript">
function onError(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
function onGridDataSourceRequestEnd(e) {
// Check request type
if (e.type == "create" || e.type == "update") {
//check for errors in the response
if (e.response == null || e.response.Errors == null) {
$('#patientGrid').data().kendoGrid.dataSource.read();
}
else {
alert("Update Failed");
}
}
}
</script>
<style>
.k-header.k-grid-toolbar, .k-button.k-button-icontext.k-grid-add, .k-window-titlebar.k-header {
background-color: #393536;
border-color: #605d5e;
}
.k-button.k-button-icontext.k-grid-add:hover {
background-color: #605d5e;
border-color: #4c494a;
}
</style>
The pop-up editor
@using AccuChart.Controllers;
@using AccuChart.Models;
@using AccuChart.ViewModels;
@(Html.Kendo().TabStrip().Animation(false)
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Patient Information")
.Selected(true)
.Content(@<text>
@Html.HiddenFor(m => m.PatientId)
@Html.HiddenFor(m => m.ClinicId)
<div class="editor-label">
@Html.LabelFor(m => m.FirstName)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.FirstName).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.FirstName)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.MiddleName)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.MiddleName).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.MiddleName)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.LastName)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.LastName).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.LastName)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.Address1)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.Address1).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.Address1)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.Address2)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.Address2).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.Address2)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.City)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.City).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.City)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.State)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.State).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.State)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.Zip)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.Zip).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.Zip)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.HomePhone)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.HomePhone).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.HomePhone)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.CellPhone)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.CellPhone).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.CellPhone)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.Email)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.Email).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.Email)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.PreferContact)
</div>
<div>
@(Html.Kendo().DropDownListFor(m => m.PreferContact)
.HtmlAttributes(new { style = "width:100%" })
.DataTextField("Name")
.DataValueField("Name")
.DataSource(ds =>
{
ds.Read(read => read.Action("GetModeContact", "Patient"));
})
.AutoBind(true)
)
@Html.ValidationMessageFor(m => m.PreferContact)
</div>
</text>);
tabstrip.Add().Text("Insurance").Content(@<text>
<div class="editor-label">
@Html.LabelFor(m => m.InsuranceCompany)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.InsuranceCompany).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.InsuranceCompany)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.InsuranceGroupNumber)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.InsuranceGroupNumber).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.InsuranceGroupNumber)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.InsurancePolicyNumber)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.InsurancePolicyNumber).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.InsurancePolicyNumber)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.InsurancePolicyHolderName)
</div>
<div>
@Html.Kendo().TextBoxFor(m => m.InsurancePolicyHolderName).HtmlAttributes(new { style = "width:100%" })
@Html.ValidationMessageFor(m => m.InsurancePolicyHolderName)
</div>
</text>);
}))
@model PatientModel
The controller
using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AccuChart.ViewModels;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using AccuChart.Models;
using System.Collections.Generic;
namespace AccuChart.Controllers
{
public class PatientController : BaseController
{
public ActionResult Index(int id=1)
{
PatientViewModel p = new PatientViewModel();
p.Patients = _patientSvc.GetByClinicId(id);
return View(p);
}
public ActionResult GetPatients([DataSourceRequest]DataSourceRequest request, int patientId=0)
{
var result = _patientSvc.GetByClinicId(CurrentClinicId).ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}
public JsonResult GetModeContact()
{
List<ModeContactModel> mode = new List<ModeContactModel>();
mode.Add(new ModeContactModel { Name = "Home Phone" });
mode.Add(new ModeContactModel { Name = "Cell Phone" });
mode.Add(new ModeContactModel { Name = "Email" });
return Json(mode, JsonRequestBehavior.AllowGet);
}
//CRUD operations
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingPopup_Create([DataSourceRequest] DataSourceRequest request, PatientModel patient)
{
PatientModel presult = null;
//var user = _userSvc.GetByEmail(this.CurrentUserEmail);
if (patient != null && ModelState.IsValid)
{
presult = _patientSvc.Create(patient, 1);
}
return Json(new[] { presult }.ToDataSourceResult(request, ModelState));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingPopup_Update([DataSourceRequest] DataSourceRequest request, PatientModel patient)
{
PatientModel presult = null;
// var user = _userSvc.GetByEmail(this.CurrentUserEmail);
if (patient != null && ModelState.IsValid)
{
presult = _patientSvc.Update(patient, 1);
}
return Json(new[] { presult }.ToDataSourceResult(request, ModelState));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingPopup_Delete([DataSourceRequest] DataSourceRequest request, PatientModel patient)
{
if (patient != null && ModelState.IsValid)
{
_patientSvc.Delete(patient);
}
return Json(new[] { patient }.ToDataSourceResult(request, ModelState));
}
}
}
4 Answers, 1 is accepted
Thank you for the provided code.
After inspecting the code it looks good and it should not cause any JavaScript error.
Could you please share with us an example or a live URL where the issue can be observed?
I can assume that the model object is not populated and it is null when the PatientId value is being accessed.
Regards,
Stefan
Progress Telerik
Rank 1
Here is the URL:
http://accuchart.azurewebsites.net/Patient
Thank you for providing the example.
After inspecting it I noticed that the server CreateAction is returning null as Data which is causing the issue as the Grid is searching for the Data.PatientId as it is set as Id:
https://www.screencast.com/t/dFzhZwa7m9
Please ensure that the Create Action is returning the newly created data item:
https://docs.telerik.com/kendo-ui/framework/datasource/crud#create-remote
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Rank 1
Thanks that was very helpful!
I was missing a line where my PatientModel was turned into the EF class Patient for Address1 - this was causing a database error and returning an exception.