Kendo().ComboBox does not retain selected values when inside of a Kendo().Grid's Editor Template when moving the focus away from the row

Question

I've been struggling with that for a while and cannot figure out the solution.

When display Kendo().ComboBox inside of a Kendo().Grid, it is populated with the data.

However, when changing the value inside of the ComboBox or Adding a new Record to the Grid, the value does not remain the same when switching the focus from the current row.

Before change:

After change and switching focus: New Value:

After switching focus:

In case of changing it to the new value, it defaults to the old one. And in case of adding a new record, it appears to be empty:

When "ADD NEW RECORD" is clicked:

After switching focus:

This is the logic I have:

Controller:

Populating Grid:

[HttpPost]
public ActionResult EditingCustom_Read([DataSourceRequest] DataSourceRequest request, IEnumerable<TestTicketReportPropertyModel> models, int ticketID)
{
    var ticketReportProp = new TestTicketReportPropertyModel().GetAll(ticketID);
    return Json(ticketReportProp.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

Populating ComboBox:

public ActionResult PopulateReportProperty(int reportID)
{
    List<eBalance.Site.eBalanceServiceReference.ReportPropertyEntity> reportPropertyList = TicketReportPropertyRepository.GetReportPropertyEntityRepository(reportID);
    return Json(reportPropertyList, JsonRequestBehavior.AllowGet);
}

Model:

//Getting Grid's data
public IList<TicketReportPropertyEntity> GetAll(int ticketID)
    => EBalanceService.GetTicketReportPropertyData(ticketID).ToList();

Service method to get the data for the Grid:

public List<TicketReportPropertyEntity> GetTicketReportPropertyData(int ticketId)
{
    var ticketReportPropertyData = TicketReportProperty.GetTicketReportPropertyData(ticketId);

    ticketReportPropertyData.ForEach(t => t.PropertyName = t.ReportProperty?.PropertyName ?? "0");
    ticketReportPropertyData.ForEach(t => t.ReportPropertyID = t.ReportProperty?.ReportPropertyID ?? 0);

    return ticketReportPropertyData;
}

The View:

<div class="div-table-row col-lg-12">
    <div style="margin-bottom: 20px;">
        @(Html.Kendo().Grid<TicketReportPropertyEntity>()
            .Name("grid2")
            .Columns(columns =>
            {
                columns.Bound(p => p.ID).Hidden();
                columns.Bound(p =>p.PropertyName).EditorTemplateName("_PropertyNameEditor").Sortable(false).Width(400);
                columns.Bound(p => p.Amount).Width(130);
                columns.Command(command => command.Destroy()).Width(150);
            })
            //.Events(events => events.Edit("Edit"))
              .ToolBar(toolBar =>
              {
                  toolBar.Create();
                  toolBar.Save();
              })
              .Editable(editable => editable.Mode(GridEditMode.InCell))
              .HtmlAttributes(new { style = "height:550px;" })
              .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                //.Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(r => r.ID);
                })
                .PageSize(20)
                .Read(read => read.Action("EditingCustom_Read", "TestTicketReportProperty", new { ticketID = Model.TicketID }))
                .Create(create => create.Action("EditingCustom_Create", "TestTicketReportProperty"))
                .Update(update => update.Action("EditingCustom_Update", "TestTicketReportProperty"))
                .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "TestTicketReportProperty"))
                )
        )
    </div>
</div>

The Editor Template:

<script>
    function GetReportID() {
        return {
            reportID: $('#ReportID').attr('text'),
        };
    }

</script>

@(Html.Kendo().ComboBox()
                            .Name("ReportPropertyCB")
                            .DataValueField("ID")
                            .DataTextField("PropertyName")
                            //.BindTo((System.Collections.IEnumerable)ViewData["reportProperties"])
                            .DataSource(d => d.Read(r => r.Action("PopulateReportProperty", "TestTicketReportProperty").Data("GetReportID()")))
                            .Template("<span class=\"k-state-default\"><h3>#: PropertyName #</h3><p>#: ReportGroup #</p></span>")
                            )

I also tried to use the Telerik's team example and it did not work in my case.

Can anyone explain what I'm doing wrong here?

Answer 1

For data-binding from grid to editor, the name of the editor should be the same as the name of the property. You can see more about Create Custom Editors for Bound Properties and Value binding.