Using the following:
Kendo UI: 2016.3.1202
Angular: 1.5.8
Chrome: 56.0.2924.87
I added a dropdownlist as specified in https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem with the exception of adding the addNew function into the kendo template.
<
script
id
=
"noDataTemplate"
type
=
"text/x-kendo-tmpl"
>
<
div
>
No data found. Do you want to add new item - '#: instance.filterInput.val() #' ?
</
div
>
<
br
/>
<
button
class
=
"k-button"
onClick
=
"addNew('#: instance.element[0].id #', '#: encodeURI(instance.filterInput.val()) #');"
>Add new item</
button
>
<
script
>
function addNew(widgetId, value) {
debugger;
var widget = $("\\#" + widgetId).getKendoDropDownList();
var dataSource = widget.dataSource;
dataSource.add({
categoryID: 0,
categoryName: value
});
dataSource.one("sync", function() {
widget.select(dataSource.view().length - 1);
});
dataSource.sync();
};
</
script
>
</
script
>
I’m having two issues:
1) When clicking the add new button, the drop down shrinks to be just the 'test' item forcing the user to manual select test. This is not how the demo works, it automatically selects the new entry and closes the dropdown. (see adding_new_item(2-3) pngs) What am I doing wrong here?
2) When a user adds a leading backslash (e.g. \test ) to the ‘add new’ input the ‘add new’ flow breaks i.e. the ‘test’ gets added to the datasource but the UI just stops running; the ‘add new‘ prompt never closes. (see adding_new_item_backslash.png)
Adding the “debugger;” directly above ‘var widget’
allows me to break within the template and step through the code. Despite breaking
in this code I can’t figure out why the UI stop running as the script seems to
run to completion. Also of note once I’m stepping through the code I noticed that widget.select(dataSource.view().length - 1); always equals -1