Combobox in grid sets items to object Object if selectedindex -1

[Sebastian]

Hello,

 

So i have this template for a combobox which looks like this:

@model ManTime.Web.ViewModels.TimeReportProjectPropertiesViewModel

@(Html.Kendo().ComboBoxFor(m => m)
      .DataValueField("ProjectId")
      .DataTextField("ProjectCode")
      .Filter("startswith")
      .ClearButton(false)
      .Suggest(true)
      .AutoBind(false)
      .BindTo(ViewData["projects"] as IEnumerable))

 

 

The ViewModel for the combobox looks like this: 

        public int ProjectId { get; set; }
        public int InvoicingCompanyId { get; set; }
        public string ProjectCode { get; set; }

        public string InvoicingCompanyName { get; set; }

        public string TimeReportApprover { get; set; }

 

 

I am displaying this in a grid with the following column structure:

@(Html.Kendo().Grid<TimeReportViewModel>()
        .Name("TimeReportsGrid").HtmlAttributes(new { @class = "shadow-sm" })
        .Columns(columns =>
        {
            columns.Command(command => command.Destroy().Text(" ").IconClass("fa fa-trash-alt")).Media("(min-width: 450px)").Width(100);
            columns.Command(command => command.Custom("Copy").Text(" ").Click("copyRow").IconClass("fa fa-copy")).Media("(min-width: 768px)").Width(100);
            columns.Bound(p => p.ApprovalStatus).Filterable(false).Width(150).Media("(min-width: 450px)");
            columns.Bound(p => p.Date).Width(200).Media("(min-width: 450px)");
            columns.Bound(p => p.TimeReportProjectProperties).Sortable(false).Filterable(false).Width(180).ClientTemplate("#=TimeReportProjectProperties.ProjectCode#").Media("(min-width: 450px)");
            columns.Bound(p => p.InvoicingCompany).Width(250).Sortable(false).Filterable(false).ClientTemplate("#=TimeReportProjectProperties.InvoicingCompanyName#").Media("(min-width: 450px)");
            columns.Bound(p => p.Days).Width(100).Sortable(false).Filterable(false).ClientTemplate("#=Days.Days#").Media("(min-width: 450px)");
            columns.Bound(p => p.IsBillable).Width(150).Media("(min-width: 450px)");
            columns.Bound(p => p.Comment).Media("(min-width: 450px)");
            columns.Bound(p => p.Approver).Width(250).ClientTemplate("#=TimeReportProjectProperties.TimeReportApprover#").Media("(min-width: 450px)");
            columns.Template("#=resColTemplate(data)#").Title("Time Report").Media("(max-width: 450px)").Width(350);
        })

 

 

The column " columns.Bound(p => p.TimeReportProjectProperties)" is the combobox-template itself and when the value of this combobox changes it also changes the columns InvoicingCompany and Approver.

To achieve this i have an event for CellClose which refreshes the grid like this "$('#TimeReportsGrid').data('kendoGrid').refresh();". This then updates the values in the grid from the selected value in the clienttemplate combobox.

 

The problem is that whenever a combobox value is empty (selectedindex -1) it sets all of the comboboxes in the grid value to "object Object" whenever i click on them.

 

This won't happen if i don't refresh the grid. However i have to refresh the grid to get the updated values on columns InvoicingCompany and Approver when the combobox value changes and cell is closed (CellClosed).

[Sebastian]

OK. So I solved this by not refreshing the entire grid, but just refresh the row i'm editing on event CellClose on the grid.

I used this example: https://docs.telerik.com/kendo-ui/knowledge-base/grid-update-particular-row-without-refresh