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

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

1 Answer 33 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 11 Aug 2015, 04:38 PM
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);
}

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 13 Aug 2015, 10:32 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Greg
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or