Kendo 客户端模板的网格列在行插入或更新后显示为空

Question

我有一个如下所示的网格：

@(Html.Kendo()
.Grid<ProjectName.TerminalOutOfState>()
.Name("manageTOSSqlRecordsGrid")
.Columns(columns =>
{
    columns.Bound(c => c.TerminalOutOfStateID).Hidden();
    columns.Bound(c => c.TerminalCompanyID).Title("Terminal ID").Width(60);
    columns.Bound(c => c.CompanyID).Title("Region").ClientTemplate("#=CompanyName#").Width(40);
    columns.Command(cmd =>
    {
        cmd.Edit();
        cmd.Destroy();
        cmd.Custom("Save").Visible("showSaveCommand").Click("saveTerminalRow");
    }).Title("Action").Width(80);
})
.ToolBar(tbr =>
{
    tbr.Create();
    tbr.Custom().Text("Load the table");
})
.Editable(edt => edt.Mode(GridEditMode.PopUp).TemplateName("TOoSTemplate").CreateAt(GridInsertRowPosition.Top))
.DataSource(dataSrc => dataSrc
    .Ajax()
    .ServerOperation(true)
    .PageSize(15)
    .Model(mdl => mdl.Id(column => column.TerminalOutOfStateID))
    .Create(update => update.Action("UpsertTerminalOoSRecordAsync", "Configuration"))
    //omitted for brevity
)
.AutoBind(false)
)

网格编辑模板如下所示：

@model Project.TerminalOutOfState
 
@Html.HiddenFor(x => x.TerminalOutOfStateID)
@Html.HiddenFor(x => x.CompanyName)
 
<div class="row">
    <div class="form-group col-sm-12">
        <div class="col-sm-5">
            <label for="TerminalCompanyID"><b>Terminal Company ID</b></label>
        </div>
        <div class="col-sm-7">
            @(Html.Kendo().TextBoxFor(x => Model.TerminalCompanyID)
            )
        </div>
    </div>
 
    <div class="form-group col-sm-12">
        <div class="col-sm-5">
            <label for="CompanyID"><b>Company</b></label>
        </div>
        <div class="col-sm-7">
            @(Html.Kendo().DropDownListFor(x => x.CompanyID)
                .OptionLabel("Select Company")
                .DataValueField("CompanyID")
                .DataTextField("CompanyName")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetCompaniesAsync", "Configuration");
                    });
                })
             )
        </div>
    </div>
</div>

我的重点是 Region 列。它获取的数据类型如下所示：

CompanyID: 1 我没有只显示 1，而是在名为 CompanyName 的变量上传递该 ID 的名称，并使用 ClientTemplate.

显示它

一切正常，看起来不错，直到我编辑该行或添加新行并且它显示为空。在我重新加载 table 之后，它显示了正确的值。

请查看我附上的屏幕截图以获得更好的图片。

更新后：刷新后：

Answer 1

好吧，我现在可以回答我自己的问题了：

我删除了旧的视图模型属性，即 CompanyID 和 CompanyName 以创建该列的组合视图模型。

public class CompanyViewModel
{
    public int CompanyID { get; set; }
    public string CompanyName { get; set; }
}

Grid 的视图模型现在看起来像这样：

public class TerminalOutOfState
{
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int TerminalOutOfStateID { get; set; }
    [Key]
    public string TerminalCompanyID { get; set; }
 
    //Other properties omitted for brevity
    public CompanyViewModel Region { get; set; }
}

像这样在网格列中使用新的视图模型：

.Columns(columns =>
{
    columns.Bound(c => c.TerminalOutOfStateID).Hidden();
    columns.Bound(c => c.TerminalCompanyID).Title("Terminal ID").Width(60);
     
    columns.Bound(c => c.Region).Title("Region").Width(40).ClientTemplate("#= Region.CompanyName #");
})

最后 GetCompaniesAsync 方法：

public async Task<IActionResult> GetCompaniesAsync()
{
    var companies = (await _someRepository.GetCompaniesAsync())
                    .Select(x => new CompanyViewModel { CompanyName = x.CompanyName, CompanyID = x.CompanyID })
                    .ToList();
    return Json(companies);
}

现在效果很好！

Kendo 客户端模板的网格列在行插入或更新后显示为空

Kendo grid column with client template showing null after row insert or update

c#

kendo-ui

kendo-grid

kendo-asp.net-mvc

asp.net-core