kendo ui Combobox binded to a Grid losts it's value and text after Grid's Cancel button pressed

Question

I have two views in database. Bonuses and employees. One(employee)-to-many(bonuses). I have kendo ui grid (kendo web), which displays ajax results from controller called Bonuses And an autocompliting element - Employee Combobox binded with Employee filed of a grid.

Grid's datasource:

        // bind json result from /Bonuses/GetPagedJsonBonuses
        var bonusesDataSource = new kendo.data.DataSource({
            transport: {                        
                read: "@Url.Action("GetPagedJsonBonuses", "Bonuses")",
                update: {
                    url: "@Url.Action("Edit", "Bonuses")",
                    type: "PUT"
                },
                create: {
                    url: "@Url.Action("Create", "Bonuses")",
                    type: "POST"
                },
                parameterMap: function(options, operation) {
                    if (operation === "update" || operation === "create") {
                        // updates the BonusDTO.EmployeeId with selected value
                        if (newValueEmployeeId !== undefined)
                            options.EmployeeId = newValueEmployeeId;
                    }
                    return options;
                }
            },                    
            schema: {
                data: "Data", // PagedResponse.Data
                total: "TotalCount", // PagedResponse.TotalCount
                model: {
                    id: "BonusId",  // Data
                    fields: {
                        EmployeeId: { type: "number" },
                        EmployeeLastName: {
                            type: "string",
                            editable: true, 
                            //validation: { required: {message: "Employee's last name is required"}}
                        },
                        Amount: {
                            type: "number",
                            editable: true,
                            nullable: false,
                            validation: {
                                required: { message: "Amount is required to be set" }
                            }
                        }                           
                    } // fields
                } // model
            }// schema 
        });

Grid element looks like this:

// creates bonuses grid control
                $("#bonusesGrid").kendoGrid({
                    dataSource: bonusesDataSource,
                    toolbar: ["create"],
                    editable: "inline",                                        
                    columns: [
                        "BonusId",                                                         
                        "EmployeeId",                                                    
                        {
                            field: "EmployeeLastName",                                                        
                            editor: employeeAutocompletingEditor,
                            template: "#=EmployeeLastName#"
                        },
                        "Amount",                        
                        {
                            command: ["edit"],
                            title: " "
                        }
                    ],
                    save: function(e) {
                        if (newValueEmployeeId !== undefined && newValueEmployeeLastName !== undefined) {
                            e.model.EmployeeId = newValueEmployeeId; // it's a hack to bind model and autocomplete control
                            e.model.EmployeeLastName = newValueEmployeeLastName;
                        }
                    },
                    edit: function(e) {
                        setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
                    },
                    cancel: function(e) {
                        setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
                    }
                });

Autocompleting combobox has it's own datasource using ajax:

// datasource for autocomlete combobox to lookup employees names from
                var employeesDataSource = new kendo.data.DataSource({                    
                    transport: {
                        read: "@Url.Action("GetJsonEmployeesByLastName", "Bonuses")",
                    },                    
                    parameterMap: function(options, operation) {
                        if (operation === "update" || operation === "create") {
                            setNewValueEmployeeIdAndLastName(options.Id, options.LastName);
                        }
                        return options;
                    },                    
                });

Autocompliting combobox look's like this:

function employeeAutocompletingEditor(container, options) {
                    $('<input required data-text-field="LastName" data-value-field="EmployeeId" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoComboBox({                            
                            // sets the local variables to update values of current row.
                            change: function() {
                                setNewValueEmployeeIdAndLastName(this.value(), this.text());
                            },
                            dataBinding: function (e) {                                
                                console.log("dataBinding: ", e, this.dataItem());
                            },
                            dataBound: function (e) {
                                console.log("dataBound: ", e, this.dataItem());
                            },
                            dataSource: employeesDataSource
                        });
                }

I use Editor binding to pass values(EmployeeId) and Text (EmployeeLastName) from grid to combobox. I also use a hack like temporal variables (newValueEmployeeId, currentValueEmployeeId) to send selected Employee in combobox and pass it to grid for correct save. A found it's a most common practice to pass a value back to grid.

My problems is: If I press Edit button on my grid first time The combobox displays current employee's name from grid row:

If I press Cancel button and again press Edit button, combobox doesn't display current value of grid (employee's name) IF I type some name, change some other values, and Udate(save) value, next time combobox again displays employees name, but only once before Cancel was pressed.

I'm very new in Kendo UI and this problem drives me crazy... I think that combobox losts it's binding or doesn't update smth. I tried to set values while onBound and onBinding events, but this doesn't help. Please help me with an advice and example.

PS all evenets and functions is my try to debug and find solution.

Answer 1

only one fix helped me:

var employeeList = new List<Employee>()
employeeList.add(new Emplpyee())  // add fake employee record.

return Json(employeeList)

I don't know why, but grid control start make cyclying empty ajax requests if I return empty list of employees or null. This doesn't work:

return Json(new List<Employee>());
return Json(null);

I think it's a problem in kendo combobox itself ,because it's not ready to receive and handle empty list or null as json result. Also I heared something, that JQuery doesn't support empty or null results anymore...maybe that's the reason