insin / react-filtered-multiselect

Filtered multi-select React component

Home Page:http://insin.github.io/react-filtered-multiselect

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

moving items to/from another instance of react-filtered-multiselect

srconklin opened this issue · comments

This is a great component.. and am researching things like this for a new project..
just curious.. Would I be able to configure it (or modify it) to move the items to/from another instance of react-filtered-multiselect instead of a ul list?

Yes, the list part is all manged by the demo app component, nothing to do with the multiselect itself.

Passing the selectedOptions returned from one multiselect into another multiselect's options prop should work just fine.

I'll update the demo with an example of this later.

On investigation, this will need a change - the component doesn't currently check if its option prop is changing - it will need to do so to re-filter options in order to update its display.

What are you planning to do with the items once they're in the other multiselect they're being moved to?

Currently the assumption is that a multiselect should no longer display any item that's selected. This might not be the behaviour you want for the second multiselect.

The use case is that the left multi-select is a long list of predefined bus stop names used to create all the routes for the NJTransit bus system.
An admin can create/edit new routes for a bus by picking (several )from the list at left (or typing and adding a new one) for placement into the one at right which then defines all the stops on that route.

I was thinking that another instance of the mutliselect would be useful at right because:

  1. the list can be quite large and should scrolled
  2. does not need to listed as ul list as they will need the full functionality of what the mult-select component offers; ie, searching, multi-select for removal (which needs to put them back into the list at left) etc...

FWIW.. this is the basic functionality i envision
http://demos.telerik.com/aspnet-ajax/listbox/examples/overview/defaultcs.aspx

but with the robustness of what you have done in your component.. which is very nice BTW... i,e. no need to do this with buttons between the two...

(actually the X button on the one at right makes no sense.. items should never just disappear completely .. they must be present in one or the other at all time, but never both)

i think you know what i mean though...

is this difficult to achieve?

A sample implementation of this has now been added to the demo:

http://insin.github.io/react-filtered-multiselect/

Beautiful! nice work!