单击“添加新记录”时，不触发Kendo Grid Popup

Question

I am using a Kendo Grid with popup editor to show rows from a database. The rows are from a "FemaleAdvice" table. Each FemaleAdvice object is going to belong to a FemaleCategory in the sense that FemaleCategory is a lookup table, and when the user selects a FemaleCategory, a list of FemaleAdvice object Titles and Descriptions will be shown.

In letting the user edit which FemaleCategory a FemaleAdvice object belongs to, it would make sense to display the Title of the category instead of the database Key. I have taken a couple steps to do this, but right now I am getting a "Uncaught: ReferenceError: Category is not defined" error in the Console when I click on "Add new record". I feel like this is something easy, but I am kind of new to MVC/Kendo, so my ignorance is showing. My code is below:

    //FemaleAdvice Model
    [Key]
    [ScaffoldColumn(false)]
    public Int64 FemaleAdviceKey { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }

    [Required]
    [UIHint("FemaleCategoryKey")]
    [DisplayName("Female Category")]
    public Int64 FemaleCategoryKey { get; set; }
    public virtual FemaleCategory Category { get; set; }


    [UIHint("Body")]
    public string Body { get; set; }

    [ScaffoldColumn(false)]
    public DateTime LastUpdated { get; set; }


    //*************FemaleAdvice View**************
    @(Html.Kendo().Grid<com.RomanceCoachOnTheGo.MVC.Models.FemaleAdvice>()
    .Name("FemaleAdvice")
    .ToolBar(toolbar =>
    {
       toolbar.Create();
     })
    .DataSource(dataSource => dataSource
            .Ajax()
            .Model(item => { item.Id(m => m.FemaleAdviceKey); })

            .Create(c => c.Action("CreateFemaleAdvice", "Administrator"))
            .Read(r => r.Action("ReadFemaleAdvice", "Administrator"))
            .Update(u => u.Action("UpdateFemaleAdvice", "Administrator"))
            .Destroy(d => d.Action("DeleteFemaleAdvice", "Administrator"))
        )
    .Columns(col =>
            {
                col.Bound(c => c.FemaleCategoryKey).ClientTemplate("#=Category.Title#");
                col.Bound(c => c.Title);
                col.Bound(c => c.Description);
                col.Bound(c => c.Body);
                col.Command(command => { command.Edit(); command.Destroy(); });
            })
    .Editable(editing => editing.Mode(GridEditMode.PopUp))
    .Sortable()
    .Pageable()

    .Filterable()
     )



     //***********Relevant Controller Action***************
     public ActionResult ReadFemaleAdvice([DataSourceRequest] DataSourceRequest request)
    {
        List<FemaleAdvice> advice = _db.FemaleAdvice.Include("Category").AllActive().ToList();

        return Json(advice.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }


    public ActionResult CreateFemaleAdvice([DataSourceRequest] DataSourceRequest request, FemaleAdvice advice)
    {
        if (ModelState.IsValid)
        {
            advice.IsActive = true;
            _db.FemaleAdvice.Add(advice);
            _db.SaveChanges();
        }

        return Json(new[] { advice }.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

Answer 1

The problem is occurring because when you add a record your Category is null. So Kendo doesn't know how to render the template you gave it here:

col.Bound(c => c.FemaleCategoryKey).ClientTemplate("#=Category.Title#");

Unfortunately the Kendo template syntax doesn't do a good job of handling nulls, so you have to check for yourself. Change the template to something like this:

#= Category != null ? Category.Title : '' #

This will print out Category.Title if it is set, otherwise it will be an empty string until it is set.