"Add New" option

[Jeff]

We're using this control for tags and we want to let them select an existing tag or add a new tag.

What's the recommended approach for adding an option to the list such as "Add New" that uses the currently entered text to create a new item?

  Nick

[Georgi Krustev]

Hello Nick,

 
In general, you can add data object to the DataSource. This will re-render the list of the available options of the MultiSelect and thus the end-user will be able to select "new option".

Kind regards,
Georgi Krustev
the Telerik team

[Jeff]

Thanks for the response, but I'm having a hard time conceptualizing how this will work.

Let's say the user has typed in "My New Tag", which doesn't match any existing items in the datasource, we would like the drop-down to show something like:

Add New "My New Tag"

And they could just hit <enter> and it would add that tag to the datasource.

I know how to add items to the datasource, but if I just add an item called "Add New", then it won't match what I'm typing (i.e. "My New Tag"), therefore I don't think I can select it.

With other controls, we've been able to bind to a keyup event and for every keypress, adjust the datasource to include an item that also has the currently entered text.

Is this possible?  Seems like this would be an extremely popular use case.

  Nick

[Jeff]

Here's an ugly attempt that almost accomplishes this.

http://jsbin.com/ucimay/3/edit
http://jsbin.com/ucimay/3 (text input doesn't seem to work in edit mode, but works in preview mode)

The main problem is that  I can only add one custom tag.  Each new one I enter overwrites the previous one.  Not sure why this is happening but it seems like there's an issue with using the value() method within the change event.  Could this be the case?

I think it makes more sense to work with the select event instead of the change event, but it seems the select event doesn't fire when using the keyboard (as noted here http://www.kendoui.com/forums/ui/multi-select/-select-event-doesn't-fire-when-using-keyboard.aspx).  Also, even when using the mouse to select the new tags, It seems I'm running into similar issues as with the change event.

Any help would be much appreciated.

  Nick

[Georgi Krustev]

Hello Nick,

 
Check the answer in the other forum thread opened on the same subject.

All the best,
Georgi Krustev
the Telerik team

[Jeff]

Thanks again Georgi,

Regarding how to implement an "Add New" option, I've improved upon the previous jsbin (I think) and will post it here for the sake of future users.

Here it is - http://jsbin.com/eputub/1

  Nick

[Rinck]

Hi,
I am trying to add this feature to my existing multiselect widget, but I am using a remote datasource (using the PHP DataSourceResult class).
I managed to get the change() and dataBound() methods set using the PHP wrappers, and the page runs without any js errors, but it's not working. Unfortunately, there's quite a lot of code to generate the multiselect, so I'll just post the basics and hope that's enough (Slightly modified to accommodate the missing element 'newitemtext'):

$front_tags_multiselect = new Kendo\UI\MultiSelect('front_tags');
        $front_tags_multiselect->dataSource($tag_datasource);
        $front_tags_multiselect->dataTextField('tag');
        $front_tags_multiselect->dataValueField('tag_id');
        $front_tags_multiselect->filter("contains");
        $front_tags_multiselect->placeholder("enter one or more search terms");

        /**
         * [add new] functionality
         */
        $front_tags_multiselect->change("
            function() {
                var value = this.value().slice(0);
                var dataitems = this.dataSource.data();

                var newtag = '';

                for (var i = 0; i < dataitems.length; i++) {
                    var dataItem = dataitems[i];

                    if(dataItem.text.substring(0, 'Add new tag: '.length) === 'Add new tag: ') {
                        newtag = dataItem.text.replace('Add new tag: ', '');
                        this.dataSource.remove(dataItem);
                    }
                }

                this.dataSource.add({value: newtag, text: newtag});

              if (newtag) {
                this.dataSource.filter({});
                if(this.value().length == 1)
                {
                    this.value(newtag);
                }
                else
                {
                    value.push(newtag);
                    console.log(value);
                    this.value(value);
                }
              }
            }
        ");
        $front_tags_multiselect->dataBound("
            function() {
                if(($('#front_new_tag').val() || this._prev) && $('#front_new_tag').val() != this._prev)
                {
                    $('#front_new_tag').val(this._prev);

                    var dataitems = this.dataSource.data();

                    var isfound = false;
                    for (var i = 0; i < dataitems.length; i++) {
                        var dataItem = dataitems[i];

                        if(dataItem.value != dataItem.text) {
                            dataItem.text = 'Add new tag: ' + $('#front_new_tag').val();
                            this.refresh();
                            isfound = true;
                        }
                    }
                    if(!isfound)
                    {
                        this.dataSource.add({text: 'Add new tag: ' + $('#front_new_tag').val(), value: $('#front_new_tag').val()});
                        this.refresh();
                    }
                    this.search();
                    this.open();
                }
            }
        ");

When I type a tag that's not in the list, I do not receive the 'add new' option.

How would this example be different when using a remote datasource (with the DataSourceResult class) with potentially many results (upwards of 2000; the datasourceresults limits the returned results to 20 currently)?
Any help is greatly appreciated!

[Georgi Krustev]

Hello Rinck,

 
I am not exactly sure where could be the problem depending on the given information. Please note that we do not support custom solutions. If you need further help with this implementation I will suggest you contact our software development services. 

Greetings,
Georgi Krustev
the Telerik team

[Joshua]

Any idea how you would try this with a datasource that is binding to remote data?

I took a shot at it by injecting my search string into the items that were returned from the search. This is done in the parse function of the datasource. it may work with you version as well. The problem that i have is that when i type in a new one it loses the last item i put in.

parse: function (results) {
    var tmp = [];
    var filters = datasource.filter();
    var filter = "";

    if (filters && filters.filters && filters.filters.length > 0) {
        filter = filters.filters[0].value;
    }

    if (filter.trim() != "" && results.d.indexOf(filter) < 0 && existingTags.indexOf(filter) < 0) {
        tmp.push(filter);
    }

    if (results.d.length < 1) {
        tmp = tmp.concat(existingTags.slice(0));
    }

    tmp = tmp.concat(results.d);

    results.d = tmp;

    return results;
}