Cannot clear values of my combobox in a batch mode editing grid

[Greg]

I would like my end users to have the ability to clear the combobox values and save the blank data.  When you clean the value and tab away from the combobox the gird shows the previous value and a change event for that row is not fired.

function loadEmployeeInfoGrid() {

    var ds = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/asgweb/ga_WebApi/api/dv_Timesheets/AdminTimeSheetEmployeeInfoLoad",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "GET"
            },
            update: {
                url: "/asgweb/ga_WebApi/api/dv_Timesheets/AdminTimeSheetEmployeeInfoUpdate",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "PUT"
            },
            parameterMap: parameterMap
        },
        pageSize: 50,
        schema: {
            model: {
                id: "EmployeePhoneId",
                fields: {
                    EmployeePhoneId: { type: "number", editable: false },
                    EmployeeName: { type: "string", editable: false },
                    product: {                    },
                    TimeSheetStartDate: { type: "date", editable: true },
                    ManagerName: { type: "string", editable: false },
                    manageroverride: { },
                    ModifiedBy: { type: "string", editable: false },
                    ModifiedDate: { type: "date", editable: false }
                }
            }
        },
        batch: true,
        sort: { field: "EmployeeName", dir: "asc" }
    });

    var grdEmployeeInfo = $("#grdEmployeeInfo").kendoGrid({
        excel: {
            fileName: "EmployeeInfo.xlsx",
            proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
            filterable: true
        },
        allowCopy: true,
        dataSource: ds,
        filterable: true,
        sortable: true,
        navigatable: true,
        scrollable: false,
        editable: true,
        groupable: false,
        pageable: {
            refresh: true,
            pageSizes: true,
            previousNext: true
        },
        toolbar: ["save", "cancel", "excel"],
        columns: [
            { field: "EmployeeName", title: "Employee", width: "200px" },
            { field: "product", title: "Product", width: "150px", editor: productDropDownEditor, template: "#=product.textField#", filterable: false },
            { field: "TimeSheetStartDate", title: "TS Start Date", format: "{0:MM/dd/yyyy}", width: "30px", filterable: true },
            { field: "ManagerName", title: "Manager", width: "30px" },
            { field: "manageroverride", title: "Manager Override", width: "150px", editor: manageroverrideDropDownEditor, template: "#=manageroverride.textField#", filterable: false },
            { field: "ModifiedBy", title: "Modified By", width: "100px", filterable: false },
            { field: "ModifiedDate", title: "Modified Date", format: "{0:MM/dd/yyyy}", width: "30px", filterable: false }
        ]
    });

}

function parameterMap(data, requestType) {

    if (requestType === 'create' || requestType === 'update') {
        return JSON.stringify(data);
    }
    return data;
}

function productDropDownEditor(container, options) {
    $('<input id="drpProduct" name="drpProduct" data-text-field="textField" data-value-field="valueField" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoComboBox({
                    filter: "contains",
                    minLength: 2,
                    autoBind: false,
                    suggest: true,
                    dataSource: {
                        serverFiltering: true,
                        transport: {
                            read: {
                                url: "/asgweb/ga_WebApi/api/Dropdowns/",
                                dataType: "json",
                                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                                type: "GET",
                                data: {
                                    "srchFinder": "dv_TimeSheetProductFind",
                                    "srchText": function (e) { return $("#drpProduct").data("kendoComboBox").input.val(); },
                                    "srchFilter": "",
                                    "srchSort": ""
                                },
                            }
                        }
                    }
                    //change: function (e) { productChange(e, options); }
                });
    $('<span class="k-invalid-msg" data-for="drpProduct"></span>').appendTo(container);
}

function manageroverrideDropDownEditor(container, options) {
    $('<input id="drpManagerOverride" name="drpManagerOverride" data-text-field="textField" data-value-field="valueField" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoComboBox({
                    filter: "contains",
                    minLength: 2,
                    autoBind: false,
                    placeholder: "Type or Select",
                    suggest: true,
                    dataSource: {
                        serverFiltering: true,
                        transport: {
                            read: {
                                url: "/asgweb/ga_WebApi/api/Dropdowns/",
                                dataType: "json",
                                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                                type: "GET",
                                data: {
                                    "srchFinder": "EmployeePhoneDirFind",
                                    "srchText": function (e) { return $("#drpManagerOverride").data("kendoComboBox").input.val(); },
                                    "srchFilter": " and ga_PhoneDirMain.ActiveStatus=1 ",
                                    "srchSort": ""
                                },
                            }
                        }
                    },
                    change: function () {
                        if (this.select() < 0) {
                            this.value("");
                        }
                    }
                });
    $('<span class="k-invalid-msg" data-for="drpManagerOverride"></span>').appendTo(container);
}

[Boyan Dimitrov]

Hello Greg,

 

If the value for the Kendo UI ComboBox widget is set to empty string the validation message should be shown and prevent model update. Could you please replicate the described problem with http://dojo.telerik.com/eBiFA example? 

 

Regards,
Boyan Dimitrov
Telerik