I have a kendo Grid with an editor column that uses a combobox whose datasource is set to an object array. Everything works fine except when a user sets enters a custom value into the combobox (for example:'abc') that doesn't match any of the datasource options. The combobox displays undefined when tabbing off of it or moving focus out of the combobox. I have tried to handle this in the change event of the combox box by adding the custom value to the datasource (using the Telerik online example for adding custom values), but that doesn't appear to work.
Below is my html file code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
</head>
<body>
<div id="mappingGrid"></div>
<script>
//$(document).ready(function () {
//capture vars
var mGrid = $("#mappingGrid").kendoGrid({
dataSource: {
schema: {
model: {
// id: "Id",
fields: {
// Id: { editable: false, nullable: false },
CustomFunction: { defaultValue: { Value: "0", Name: "" } },
}
}
},
},
// batch:true,
pageSize: 10,
autoBind: false,
height: 300,
width: 300,
scrollable: true,
sortable: true,
filterable: true,
editable: true,
// serverFiltering: true,
toolbar: ["create"],
columns: [
{ field: "CustomFunction", title: "Custom Function", editor: customFunctionEditor, template: "#=CustomFunction.Name#" },
{ command: [{ name: "destroy", text: "" }], title: " ", width: "100px" }],
});
function customFunctionEditor(container, options) {
$('<input id="CustomFunction" name="CustomFunction">')
.appendTo(container)
.kendoComboBox({
dataTextField: "Name",
dataValueField: "Value",
change: onComboBoxChange,
// autoBind: abind,
dataSource: [
{ Name: "Add", Value: "1" },
{ Name: "Subtract", Value: "2" },
{ Name: "Multiply", Value: "3" },
{ Name: "Divide", Value: "4" }
],
}).appendTo(container);
}
function DisplayError(xhr) {
var msg = JSON.parse(xhr.responseText);
errornotification("Error", msg.Message);
// alert(msg.Message);
}
function onComboBoxChange(e) {
var combo = e.sender;
var comboText = combo.text();
// check if new value is a custom one
if (!combo.dataItem()) {
var dataSource = combo.dataSource;
dataSource.add({
Value: combo.text(),
Name: combo.text()
});
dataSource.one("sync", function () {
combo.select(dataSource.view().length - 1);
});
dataSource.sync();
}
}
});
</script>
</body>
</html>
2 Answers, 1 is accepted
Hello David,
As mentioned in the select article this method does not trigger change event. This could affect MVVM value binding. The model bound to the widget will not be updated. You can overcome this behavior trigerring the change event manually using trigger("change") method.
Also the sync method will not be triggered in this case because the DataSource is not configured to support CRUD operations. Please refer to the ComboBox / Add new item demo to check the ComboBox DataSource configuration in order to support Create and Read operations.
I modified your example to implement the desired functionality - check the http://dojo.telerik.com/InIyo.
Regards,Boyan Dimitrov
Telerik by Progress
Rank 1