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

[Ashish]

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

 

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.

 

[Ashish]

Posting the TOosTemplate.cshtml (grid edit template file) contents here if that helps with troubleshooting:

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

[Tsvetomir]

Hi Ashish,

When the user adds a new row to the grid, it is expected to see the value null populated for the respective column. This is due to the fact that there is no value or editor for the "CompanyName" column.

However, in edit mode, it is not expected to see the null value. Perhaps, the server-side logic does not return the full data item, hence, if the CompanyName value is not present in the response, it will not be shown in the grid. Can you share the code snippets for the Create/Update ActionMethod as well as the response generated? The response can be observed in the Network tab of the devtools. 

Looking forward to your reply.

 

Kind regards,
Tsvetomir
Progress Telerik

[Ashish]

Hi Tsvetomir,

Thank you for the response.

The server was indeed returning the full data but somehow it was not showing up. This is how I fixed it:

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 RegionViewModel { RegionName = x.CompanyName, RegionID = x.CompanyID })
                    .ToList();
    return Json(companies);
}

 

Works great now!

[Ashish]

I posted this to my stackoverflow as well.