How can I add partial match new item.

[Jiatang]

I notice that kendo has a new feature to customize the noDataTemplate. Then you can use that to allow user adding a new item when there is no match.

Just like this example: http://demos.telerik.com/kendo-ui/multiselect/addnewitem

 

 

But what if I want to add a new item of partial match. Say you have "Chai" in the options, but I want to add "Cha". Can we do that with kendo?

[Ivan Danchev]

Hello Jiantang,

The scenario shown in our demo involves using the noDataTemplate, which is displayed only when no results matching the entered string are found. Whereas in the scenario you describe if "Chai" is present in the data source and you enter "Cha" the template will not be displayed, because a match will be found ("Chai") and returned, thus the noDataTemplate cannot be used for adding a new item in this case. We can suggest considering using the filtering event, in the handler of which you can access the user input and implement your own logic for adding a new item to the MultiSelect's data source.

Regards,
Ivan Danchev
Telerik by Progress

[Peter]

Here is an example of the implementation of this in MVVM:

<select data-role="multiselect"
                            data-text-field="Text"
                            data-value-field="Value"
                            data-no-data-template="multiselectNoDataTemplate"
                            data-bind="source: state.multiselectSource,events:{filtering:handlers.onMultiSelectFilter }"></select>

 

<script id="multiselectNoDataTemplate" type="text/x-kendo-tmpl">
    # var value = instance.input.val(); #
    # var id = instance.element[0].id; #
    <div>
        No data found. Do you want to add new item - '#: value #' ?
    </div>
    <br />
    <button class="k-button" onclick="addNewMultiselectItem('#: id #', '#: value #')" ontouchend="addNewMultiselectItem('#: id #', '#: value #')">Add new item</button>
</script>

  function addNewMultiselectItem(widgetId, value) {
        var widget = $("#" + widgetId).getKendoMultiSelect();
        var dataSource = widget.dataSource;

        if (confirm("Are you sure?")) {
            dataSource.add({
                value
            });

            dataSource.sync();
        }
    }

 onMultiSelectFilter: function (e)
                {
                    var filter = e.filter;
                    var exists = false;
                    e.sender.dataSource.data().forEach(function (i) {
                        if (e.filter.value == i.Value)
                        {
                            exists == true;
                        }
                    });

                    if (!exists)
                    {
                        e.filter.value = null;
                    }
                },