时间戳

首页 > 解决方案 > 带有客户端模板的 Kendo 网格列在行插入或更新后显示为空

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

问题描述

我有一个看起来像这样的网格：

@(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-corekendo-uikendo-gridkendo-asp.net-mvc

解决方案

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

我删除了旧的视图模型属性，即为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);
}

现在效果很好！

推荐阅读