ViewModel Object Property Undefined

[Mark]

I have the following grid definition which displays data without issue:

@(Html.Kendo().Grid<HFITDashboard.UI.Models.Validation.ValidationViewModel>()
            .Name("dataValidationReportGrid")
            .Columns(column =>
            {
                column.Bound(v => v.ValidationId).Hidden(true);
                column.Bound(v => v.Name);
                column.Bound(v => v.EtlBatchJobId);
                column.Bound(v => v.EtlBatchJob.Frequency);
                column.Bound(v => v.ValidationSubTypeId).Hidden(true);
                column.Bound(v => v.ValidationSubType.Name).Hidden(true);
                column.Bound(v => v.ValidationSubType.ValidationType.Name).Hidden(true);
                column.Bound(v => v.Purpose).Hidden(true);
                column.Bound(v => v.CalendarDate).ClientTemplate(string.Format("{0}", "#= truncator(CalendarDate) #")).HtmlAttributes(new { title = "#= CalendarDate #" });
                column.Bound(v => v.ValidationQuery).ClientTemplate(string.Format("{0}", "#= truncator(ValidationQuery) #")).HtmlAttributes(new { title = "#= ValidationQuery #" });
                column.Bound(v => v.Threshold).Hidden(true);
                column.Bound(v => v.EmailMessage).Hidden(true);
                column.Bound(v => v.EmailRecipient).Hidden(true);
                column.Bound(v => v.WorksheetName).Hidden(true);
                column.Bound(v => v.PowerShellCommand).Hidden(true);
                column.Bound(v => v.Column1Description).Hidden(true);
                column.Bound(v => v.Column2Description).Hidden(true);
                column.Bound(v => v.Column3Description).Hidden(true);
                column.Bound(v => v.Column4Description).Hidden(true);
                column.Bound(v => v.Column5Description).Hidden(true);
                column.Bound(v => v.Column6Description).Hidden(true);
                column.Bound(v => v.Column7Description).Hidden(true);
                column.Bound(v => v.Column8Description).Hidden(true);
                column.Bound(v => v.Column9Description).Hidden(true);
                column.Bound(v => v.Column10Description).Hidden(true);
                column.Bound(v => v.Column11Description).Hidden(true);
                column.Bound(v => v.Column12Description).Hidden(true);
                column.Bound(v => v.Column13Description).Hidden(true);
                column.Bound(v => v.Column14Description).Hidden(true);
                column.Bound(v => v.Column15Description).Hidden(true);
                column.Bound(v => v.Column16Description).Hidden(true);
                column.Bound(v => v.Column17Description).Hidden(true);
                column.Bound(v => v.Column18Description).Hidden(true);
                column.Bound(v => v.Column19Description).Hidden(true);
                column.Bound(v => v.Column20Description).Hidden(true);
                column.Bound(v => v.AddDateTime).Hidden(true).Format("{0:MM/dd/yyyy}");
                column.Bound(v => v.LastMaintenanceDateTime).Format("{0:MM/dd/yyyy}");
                column.Bound(v => v.LastMaintenanceOperatorId).Hidden(true);
                column.Command(cmd =>
                {
                    cmd.Edit().Text(" ").HtmlAttributes(new { title = "Edit" });
                    cmd.Destroy().Text(" ").IconClass("k-icon k-i-trash").HtmlAttributes(new { title = "Delete" });
                    cmd.Custom("Validate").Text(" ").IconClass("k-icon k-i-check").Click("executeValidation").HtmlAttributes(new { title = "Execute Validation" });
                    cmd.Custom("Copy").Text(" ").IconClass("k-icon k-i-copy").Click("copyValidation").HtmlAttributes(new { title = "Copy Validation" });
                });
            })
            .ToolBar(tb => tb.Create().Text("Add New Validation"))
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Validation"))
            .ColumnMenu()
            .Filterable()
            .Groupable()
            .Pageable()
            .Scrollable(s => s.Height(490))
            .Sortable()
            .Events(e =>
            {
                e.Edit("onEditGrid");
            })
            .DataSource(ds => ds
                .Ajax()
                .PageSize(7)
                .Model(model => model.Id(v => v.ValidationId))
                .Create(create => create.Action("Create", "Validation"))
                .Read(read => read.Action("Read", "Validation"))
                .Update(update => update.Action("Update", "Validation"))
                .Destroy(destroy => destroy.Action("Destroy", "Validation"))
                .Events(e => e.RequestEnd("onRequestEnd"))
            )
    )

 

The ViewModel is defined as:

public class ValidationViewModel
    {
        public ValidationViewModel()
        {
            EtlBatchJob = new EtlBatchJob();
            ValidationSubType = new ValidationSubType();
            ValidationSubType.ValidationType = new ValidationType();
        }

        [Display(Name = "Id")]
        public int ValidationId { get; set; }

        [Display(Name = "Name")]
        public string Name { get; set; }

        [Display(Name = "Etl Batch Job")]
        public int? EtlBatchJobId { get; set; }


        public EtlBatchJob EtlBatchJob { get; set; }

        [Display(Name = "Validation Sub Type")]
        public int? ValidationSubTypeId { get; set; }

        public ValidationSubType ValidationSubType { get; set; }

        [Display(Name = "Purpose")]
        public string Purpose { get; set; }

        [Display(Name = "Calendar Date")]
        public string CalendarDate { get; set; }

        [Display(Name = "ValidationQuery")]
        [Required]
        public string ValidationQuery { get; set; }

        [Display(Name = "Threshold")]
        public int? Threshold { get; set; }

        [Display(Name = "Email Message")]
        public string EmailMessage { get; set; }

        [Display(Name = "Email Recipient")]
        public string EmailRecipient { get; set; }

        [Display(Name = "Worksheet Name")]
        [Required]
        public string WorksheetName { get; set; }

        [Display(Name = "PowerShell Command")]
        [Required]
        public string PowerShellCommand { get; set; }

        [Display(Name = "Column 1 Description")]
        [Required]
        public string Column1Description { get; set; }

        [Display(Name = "Column 2 Description")]
        public string Column2Description { get; set; }

        [Display(Name = "Column 3 Description")]
        public string Column3Description { get; set; }

        [Display(Name = "Column 4 Description")]
        public string Column4Description { get; set; }

        [Display(Name = "Column 5 Description")]
        public string Column5Description { get; set; }

        [Display(Name = "Column 6 Description")]
        public string Column6Description { get; set; }

        [Display(Name = "Column 7 Description")]
        public string Column7Description { get; set; }

        [Display(Name = "Column 8 Description")]
        public string Column8Description { get; set; }

        [Display(Name = "Column 9 Description")]
        public string Column9Description { get; set; }

        [Display(Name = "Column 10 Description")]
        public string Column10Description { get; set; }

        [Display(Name = "Column 11 Description")]
        public string Column11Description { get; set; }

        [Display(Name = "Column 12 Description")]
        public string Column12Description { get; set; }

        [Display(Name = "Column 13 Description")]
        public string Column13Description { get; set; }

        [Display(Name = "Column 14 Description")]
        public string Column14Description { get; set; }

        [Display(Name = "Column 15 Description")]
        public string Column15Description { get; set; }

        [Display(Name = "Column 16 Description")]
        public string Column16Description { get; set; }

        [Display(Name = "Column 17 Description")]
        public string Column17Description { get; set; }

        [Display(Name = "Column 18 Description")]
        public string Column18Description { get; set; }

        [Display(Name = "Column 19 Description")]
        public string Column19Description { get; set; }

        [Display(Name = "Column 20 Description")]
        public string Column20Description { get; set; }

        [Display(Name = "Add Date Time")]
        public DateTime? AddDateTime { get; set; }

        [Display(Name = "Last Updated")]
        public DateTime? LastMaintenanceDateTime { get; set; }

        [Display(Name = "Last Updated By")]
        public string LastMaintenanceOperatorId { get; set; }
    }

 

Again, the grid displays data just fine. The issue is when I click the "Add New Validation" button, I get the following JavaScript error:

Uncaught TypeError: Cannot read property 'Frequency' of undefined
    at eval (eval at compile (kendo.all.js:194), <anonymous>:3:956)
    at init._rowsHtml (kendo.all.js:61016)
    at init._renderContent (kendo.all.js:61680)
    at init.refresh (kendo.all.js:61518)
    at init.proxy (jquery-3.3.1.js:10268)
    at init.trigger (kendo.all.js:124)
    at init._process (kendo.all.js:7333)
    at init._change (kendo.all.js:7290)
    at init.proxy (jquery-3.3.1.js:10268)
    at init.trigger (kendo.all.js:124)

 

The Frequency property is a property of the EtlBatchJob property of my ViewModel. My guess is that the EtlBatchJob property is not initialized, and therefore, undefined. When I edit the record, the Frequency property is displayed without issue.

I added a constructor to my ViewModel to initialize my object properties, but that doesn't seem to do anything - I still receive the error.

Should I just flatten-out my ViewModel to only contain simple value types or am I doing something wrong?

 

[Tsvetina]

Hi Mark,

When editing a nested property, you should declare a default value for it in the DataSource model, so new data items are initialized properly without undefined properties. See, for example, the Custom Editor demo. The Category field is a complex property, so there is a DefaultValue declared for it:

.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .ServerOperation(false)
    .Events(events => events.Error("error_handler"))
    .Model(model =>
    {
        model.Id(p => p.ProductID);
        model.Field(p => p.ProductID).Editable(false);
        model.Field(p => p.Category).DefaultValue(
            ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);
    })
    .PageSize(20)
    .Read(read => read.Action("EditingCustom_Read", "Grid"))
    .Create(create => create.Action("EditingCustom_Create", "Grid"))
    .Update(update => update.Action("EditingCustom_Update", "Grid"))
    .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Grid"))
)

private void PopulateCategories()
{
    var dataContext = new SampleEntities();
    var categories = dataContext.Categories
                .Select(c => new CategoryViewModel {
                    CategoryID = c.CategoryID,
                    CategoryName = c.CategoryName
                })
                .OrderBy(e => e.CategoryName);

    ViewData["categories"] = categories;
    ViewData["defaultCategory"] = categories.First();
}

It is also possible to just initialize a new object with empty values.

Regards,
Tsvetina
Progress Telerik

[Mark]

Hi Tsvetina,

Thank you for the reply. I decided to keep it simple and just flattened my ViewModel and let AutoMapper handle the rest.

[Anh]

I have similar problem and I tried your solution but it did not work. My grid is a nested grid. When I click the arrow to expand the child grid, I got the error and PopulateCategories() never got called.

[Tsvetina]

Hello Anh,

Didn't it help to add a default value for the complex field in the DataSource? If you are still having the problem, please share the error message and the relevant code snippets, so we can try to track down the exact cause of the issue.

Regards,
Tsvetina
Progress Telerik