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

Javascript error upon saving from Pop-up Grid

4 Answers 74 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 09 Jan 2018, 12:45 AM

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

Sort by
0
Stefan
Telerik team
answered on 10 Jan 2018, 07:39 AM
Hello, Dan,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
answered on 10 Jan 2018, 12:24 PM

Here is the URL:

http://accuchart.azurewebsites.net/Patient

 

0
Stefan
Telerik team
answered on 12 Jan 2018, 07:16 AM
Hello, Dan,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
answered on 13 Jan 2018, 12:31 AM

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.

Tags
Grid
Asked by
Dan
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Dan
Top achievements
Rank 1
Share this question
or