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);
}