This is a migrated thread and some comments may be shown as answers.

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

4 Answers 84 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ashish
Top achievements
Rank 1
Veteran
Ashish asked on 16 Jan 2021, 04:34 AM

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.

 

4 Answers, 1 is accepted

Sort by
0
Ashish
Top achievements
Rank 1
Veteran
answered on 16 Jan 2021, 04:58 AM

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>
0
Tsvetomir
Telerik team
answered on 20 Jan 2021, 03:15 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ashish
Top achievements
Rank 1
Veteran
answered on 22 Jan 2021, 05:30 PM

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!

0
Ashish
Top achievements
Rank 1
Veteran
answered on 22 Jan 2021, 05:58 PM
I posted this to my stackoverflow as well.
Tags
Grid
Asked by
Ashish
Top achievements
Rank 1
Veteran
Answers by
Ashish
Top achievements
Rank 1
Veteran
Tsvetomir
Telerik team
Share this question
or