How to append a selected Item?

6 posts, 0 answers
  1. Rodney
    Rodney avatar
    24 posts
    Member since:
    Jan 2011

    Posted 22 Apr 2013 Link to this post

    I have a multiselect with 3 items selected, I want to add or append a fourth selected item. How do I do this?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 22 Apr 2013 Link to this post

    Hello Rodney,

    I am not quite sure if I understand your scenario correctly - could you please elaborate a bit more on the exact functionality you would like to achieve? This way I would be able to advice you further and provide concrete recommendations. Thank you in advance for your cooperation.
     
    Kind regards,
    Iliana Nikolova
    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. Rodney
    Rodney avatar
    24 posts
    Member since:
    Jan 2011

    Posted 22 Apr 2013 Link to this post

    I have a multiselect with 3 items selected, I want to add or append a fourth selected item. How do I do this?

    My HTML:

    <input id="selectedFilters" />

    My script:

    var data = [ {name: '1st item', value: '10' },
    {name: '2nd item', value: '11' },
    {name: '3rd item', value: '12' },
    {name: '4th item', value: '13' },
    {name: '5th item', value: '14' },
    {name: '6th item', value: '15' } ];

    $('#selectedFilters').kendoMultiSelect({
    dataSource: data,
    dataTextField: 'name',
    dataValueField: 'value',
    filter: 'contains',
    placeholder: "Add Filter",
    delay: 0,
    minLength: 2,
    highlightFirst: true,
    ignoreCase: true,
    change: function (event) {
    applyFilters();
    },
    });

    Here is the code I'm attempting to append the selected Items. What am I doing wrong?

    var selected = productMultiSelect.dataItems();
    var newArray = $.merge(selected, [idToAppend]);
    newArray = $.unique(newArray);
    productMultiSelect.value(newArray);

    Here is a JS Fiddle that shows my difficulty:
    http://jsfiddle.net/rodneyhickman/nDmjt/2/

    My Difficulty appears to be when I edit the selection. Like remove and/or update selected items.  I have Kendo Multi Select on my MVC partial view. I use a jQuery.colorbox to pop up multiple multi selects. when I close the dialog box I update the selection of the main MVC partial view.  I have over 6,000 data items in the MultiSelect. Generally only one to two items appear to be selected.  

    In the js fiddle above I use a foreach to append each selection one at a time. This fails. In my code the foreach gets the same results as un-commenting the line // multiselect.value(res); and commenting out the foreach section of code. In this js fiddle it just fails.

    Any suggestions?
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 24 Apr 2013 Link to this post

    Hi Rodney,

    Thank you for the detailed information and for the example. In order to append additional items you could use the jQuery slice() method. For your convenience I updated the jsFiddle example - please check it and let me know if this fits your requirements.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Marin
    Marin avatar
    1 posts
    Member since:
    Aug 2014

    Posted 07 Aug 2014 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    How can I achieve the same behaviour using angular js ? Thanks in advance.

    Have a nice day,
    Marin
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 11 Aug 2014 Link to this post

    Hi Marin,

    Could you please provide more detailed information about your exact scenario as well as a simple DOJO example which demonstrates the current implementation? Thank you in advance for your time and cooperation.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready