"Add New" option

9 posts, 1 answers
  1. Nick
    Nick avatar
    31 posts
    Member since:
    Oct 2011

    Posted 21 Mar 2013 Link to this post

    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
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 22 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Nick
    Nick avatar
    31 posts
    Member since:
    Oct 2011

    Posted 22 Mar 2013 Link to this post

    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
  5. Nick
    Nick avatar
    31 posts
    Member since:
    Oct 2011

    Posted 22 Mar 2013 Link to this post

    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
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 26 Mar 2013 Link to this post

    Hello Nick,

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

    All the best,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Answer
    Nick
    Nick avatar
    31 posts
    Member since:
    Oct 2011

    Posted 26 Mar 2013 Link to this post

    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
  8. Rinck
    Rinck avatar
    23 posts
    Member since:
    Feb 2013

    Posted 11 Apr 2013 Link to this post

    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!
  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 12 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 13 Oct 2013 Link to this post

    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;
    }
Back to Top
Kendo UI is VS 2017 Ready