Javascript error upon saving from Pop-up Grid

5 posts, 0 answers
  1. Dan
    Dan avatar
    4 posts
    Member since:
    Feb 2016

    Posted 08 Jan Link to this post

    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));
            }


        }
    }

     

     

     

  2. Stefan
    Admin
    Stefan avatar
    2056 posts

    Posted 10 Jan Link to this post

    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.
  3. Dan
    Dan avatar
    4 posts
    Member since:
    Feb 2016

    Posted 10 Jan in reply to Stefan Link to this post

    Here is the URL:

    http://accuchart.azurewebsites.net/Patient

     

  4. Stefan
    Admin
    Stefan avatar
    2056 posts

    Posted 12 Jan Link to this post

    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.
  5. Dan
    Dan avatar
    4 posts
    Member since:
    Feb 2016

    Posted 12 Jan in reply to Stefan Link to this post

    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.

Back to Top