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

How can I add partial match new item.

2 Answers 140 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Jiatang
Top achievements
Rank 1
Jiatang asked on 05 Apr 2017, 04:39 PM

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?

2 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 07 Apr 2017, 11:37 AM
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
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.
0
Peter
Top achievements
Rank 1
answered on 04 Sep 2020, 08:28 PM

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

 

 

 

 

 

Tags
MultiSelect
Asked by
Jiatang
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Peter
Top achievements
Rank 1
Share this question
or