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

【问题标题】：Kendo grid column with client template showing null after row insert or update带有客户端模板的 Kendo 网格列在行插入或更新后显示为空
【发布时间】：2021-01-22 17:54:18
【问题描述】：

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

@(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，而是将这个 ID 的名称传递给一个名为 CompanyName 的变量，并使用 ClientTemplate 显示它。

在我编辑行或添加新行并显示为空之前，一切正常且看起来不错。重新加载表格后，它会显示正确的值。

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

更新后：刷新后：

【问题讨论】：

标签： c# asp.net-core kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

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

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

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

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

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

现在效果很好！

【讨论】：