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

Leading backslash breaks adding a new item

1 Answer 76 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 01 Mar 2017, 08:45 PM

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 

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 02 Mar 2017, 08:35 AM
Hello Jason,

I replied in the Support Ticket and the other forum thread with identical subject, which this thread duplicates.

Regards,
Ivan Danchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
DropDownList
Asked by
Jason
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or