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

Question

I have a grid that looks like this:

@(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)
)

The grid edit template looks like this:

@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>

My focus here is on the Region column. The kind of data it gets looks like this:

CompanyID: 1 Instead of showing just 1, I pass the Name for that Id on a variable called CompanyName and show it using ClientTemplate.

It all works and looks good until I either edit the row or add a new row and it shows null. After I reload the table, then it shows the correct value.

Please look at my attached screenshots to get a better picture.

After Update: After Refresh:

Answer 1

Well, I can answer my own question now:

I removed the old view model properties, i.e.CompanyID and CompanyName to create a combined view model for that column.

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

Grid's View model looks like this now:

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

Used the new view model in the grid column like this:

.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 #");
})

Finally the GetCompaniesAsync method:

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

Works great now!