Popup Editor with Template fails on create

[Bob]

With the code that follows, I am able to edit any record, but I cannot add a new record.  The popup window never appears and I get a javascript error "0x800a1391 - JavaScript runtime error: SupplierLocation is undefined".  

(grid code)

@(Html.Kendo().Grid<FastTrack.MVC.Models.ContractorLoadTicketModel>().Name("gridUnreconciledContractor").Columns(c =>
        {
            c.Bound(m => m.SupplierLocation).ClientTemplate("#= SupplierLocation.SupplierName #").Title("Supplier");
            c.Bound(m => m.SupplierLocation.LocationName).Title("Origin");
            c.Bound(m => m.TicketNumber).Title("Ticket #");
            c.Bound(m => m.ReceivedDate).Title("Date").Format("{0:MM/dd/yy}").HtmlAttributes(new { style = "text-align:right" });
            c.Bound(m => m.ProjectMaterial.MaterialName).Title("Material");
            c.Bound(m => m.Hauler.HaulerName).Title("Hauler");
            c.Bound(m => m.TruckNum).Title("Truck #").Width(75)
                .ClientFooterTemplate("Loads: #=count#")
                .FooterHtmlAttributes(new { style = "text-align:right" });
            c.Bound(m => m.Quantity).Title("Quantity").Format("{0:n2}").HtmlAttributes(new { style = "text-align:right" })
                .ClientFooterTemplate("Total: #=kendo.toString(sum, 'n2') #")
                .FooterHtmlAttributes(new { style = "text-align:right" });
        })
        .DataSource(d => d
            .Ajax()
            .ServerOperation(false)
            .Read(read => read.Action("GetUnreconciledContractorTickets", "TicketReconcile").Data("paramProjectKey"))
            .Create(update => update.Action("SaveTicket", "TicketReconcile"))
            .Update(update => update.Action("SaveTicket", "TicketReconcile"))
            .Destroy(update => update.Action("DeleteTicket", "TicketReconcile"))
            .Events(events => events.Sync("contractorTicketSaved"))
            .Aggregates(a =>
                {
                    a.Add(m => m.TruckNum).Count();
                    a.Add(m => m.Quantity).Sum();
                })
            .Model(model => model.Id(m => m.TicketKey))
        )
        .ToolBar(toolbar =>
        {
            toolbar.Create();
        }

(model)

public class ContractorLoadTicketModel
    {
        public int TicketKey { get; set; }
        public int ProjectKey { get; set; }
        [Display(Name="Supplier/Location")]
        public SupplierLocationModel SupplierLocation { get; set; }
        [Display(Name = "Ticket #")]
        public int TicketNumber { get; set; }
        [Display(Name = "Material")]
        public ProjectMaterialModel ProjectMaterial { get; set; }
        public HaulerModel Hauler { get; set; }
        [Display(Name = "Truck #")]
        public string TruckNum { get; set; }
        [Display(Name = "Date")]
        public System.DateTime ReceivedDate { get; set; }
        [Display(Name = "Date/Time")]
        public System.DateTime ReceivedDateTime { get; set; }
        public Nullable<decimal> Latitude { get; set; }
        public Nullable<decimal> Longitude { get; set; }
        public System.DateTime UploadTime { get; set; }
        public string EnteredByUser { get; set; }
        public string DeviceID { get; set; }
        public decimal Quantity { get; set; }
        public string Reconciled { get; set; }
        public bool HasImage { get; set; }
        public bool HasNote { get; set; }

        public ContractorLoadTicketModel()
        {
            SupplierLocation = new SupplierLocationModel();
            ProjectMaterial = new ProjectMaterialModel();
            Hauler = new HaulerModel();
        }
    }

(template)

@model FastTrack.MVC.Models.ContractorLoadTicketModel

@Html.HiddenFor(model => model.TicketKey)
@Html.HiddenFor(model => model.ProjectKey)

<div class="editor-label" >
    @Html.LabelFor(model => model.SupplierLocation)
</div>
<div class="editor-field">
    @(Html.Kendo().DropDownListFor(model => model.SupplierLocation).HtmlAttributes(new { style = "width:75%" })
.DataTextField("SupplierLocation")
.DataValueField("OriginKey")
.DataSource(d => d
    .Read("GetSupplierLocations", "DatabaseUtility")
    )
    )    @Html.ValidationMessageFor(model => model.SupplierLocation)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.ProjectMaterial)
</div>
<div class="editor-field">
    @(Html.Kendo().DropDownListFor(model => model.ProjectMaterial).HtmlAttributes(new { style = "width:75%" })
.DataTextField("MaterialName")
.DataValueField("MaterialKey")
.DataSource(d => d.Read(read => read.Action("GetProjectMaterials", "DatabaseUtility").Data("paramProjectKey")))
    )
    @Html.ValidationMessageFor(model => model.ProjectMaterial)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Hauler)
</div>
<div class="editor-field">
    @(Html.Kendo().DropDownListFor(model => model.Hauler).HtmlAttributes(new { style = "width:75%" })
.DataTextField("HaulerName")
.DataValueField("HaulerKey")
.DataSource(d => d.Read(read => read.Action("GetHaulers", "DatabaseUtility")))
    )
    @Html.ValidationMessageFor(model => model.Hauler)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.TicketNumber)
</div>
<div class="editor-field">
   @Html.Kendo().NumericTextBoxFor(model => model.TicketNumber).Format("####").HtmlAttributes(new { style = "width:75%" })
    @Html.ValidationMessageFor(model => model.TicketNumber)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.ReceivedDateTime)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.ReceivedDateTime)
    @Html.ValidationMessageFor(model => model.ReceivedDateTime)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.TruckNum)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.TruckNum, new { style = "width:75%" })
    @Html.ValidationMessageFor(model => model.TruckNum)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Quantity)
</div>
<div class="editor-field">
   @Html.Kendo().NumericTextBoxFor(model => model.Quantity).Decimals(2).HtmlAttributes(new { style = "width:75%" })
    @Html.ValidationMessageFor(model => model.Quantity)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Latitude)
</div>
<div class="editor-field">
    @Html.Kendo().NumericTextBoxFor(model => model.Latitude).Decimals(8).Format("##.########").HtmlAttributes(new { style = "width:75%" })
    @Html.ValidationMessageFor(model => model.Latitude)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Longitude)
</div>
<div class="editor-field">
    @Html.Kendo().NumericTextBoxFor(model => model.Longitude).Decimals(8).Format("##.########").HtmlAttributes(new { style = "width:75%" })
    @Html.ValidationMessageFor(model => model.Longitude)
</div>

[Daniel]

Hi,

The error would be thrown because of this column template:

c.Bound(m => m.SupplierLocation).ClientTemplate("#= SupplierLocation.SupplierName #").Title("Supplier");

The SupplierLocation object will be null by default for new items so you should either set a default value with the DataSource Model:

.Model(model =>
    {
        model.Id(m => m.TicketKey)
        model.Field(m => m.SupplierLocation).DefaultValue(new SupplierLocation());
    })

or check if the object is not null in template before accessing its fields:

#= data.SupplierLocation ? SupplierLocation.SupplierName : '' #

Regards,
Daniel
Telerik