How to create multi select dropdown

2292
7
08-09-2019 11:32 AM
BrianLeroux
Occasional Contributor III

So I was trying to create a regular dijit/form/MultiSelect but can't seem to get it to populate any values using JS. As I was looking for examples in other wigets I notice the query widget has a nice multi select drop down widget. This would fit my needs much better. Anyone have any knowledge on how to create this?

If not I will keep trying to get my regular multiselect working.

function(response) {			  
					let option;
					let optionsArray = [];
					
								
					
					for (let i = 0; i < response.features.length; i++) {
						switch (selectField) {
							case "capCat":
								option = {value: [response.features[i].attributes.CAT_No, response.features[i].attributes.CAT_Begin_Dt, response.features[i].attributes.CAT_End_Dt], label: response.features[i].attributes.CAT_Full_Name};;
								optionsArray.push(option);
								break;
							case "capPeril":
								option = {value: response.features[i].attributes.COVERAGE, label: response.features[i].attributes.COVERAGE};;
								optionsArray.push(option);
								break;
						}
							
					}
					//Use this if regular select
					if (selectField == "capCat" ){
						// Add a defualt option first
						let option1 = { value: "-", label: "Select a " + title, selected: true };
						select.addOption(option1);
						//Then add the rest of the options
						select.addOption(optionsArray);
					} else { //use this if multiselect 
					//Attempt to load using store/Memory
					
					select.set("store", new Memory({data: optionsArray, idProperty: "value"}));
					select.set ("labelAttr", "label");
					console.log(select);
					}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
7 Replies
RobertScheitlin__GISP
MVP Emeritus

Brain,

  That is the jimu.js\dijit\_filter\AdvancedListValueProvider.js. You can see it being used in the ValueProviderFactory.js file.

0 Kudos
BrianLeroux
Occasional Contributor III

Hi Robert, Just back from vacation and catching up on this. I see what you are talking about. Any chance there is documentation on usage? I am not sure how well I will be able to figure things out. Thank you.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Nope no doc exists for that.

0 Kudos
BrianLeroux
Occasional Contributor III

Oh well. I just switched to using dojox/form/CheckedMultiSelect instead. Everything works great with that.

0 Kudos
voliv
by
New Contributor II

Hello Brian

I have been trying to use CheckedMultiSelect in my widget with no luck. Could you show me an example? I have issues importing the css, I suspect.

Maybe there is a better way to implement a multiselect with a search box by now, but I have not been able to find it.
Thank you, any help would be appreciated. 

0 Kudos
MostafaGhanem
New Contributor

Hi Brian,

did you have any luck making the CheckedMultiSelect  work.  I am facing same issue.  this my code below:

// Data

var dropList = [{id:1, value:”PMT”},{id:2,value:”DRW”},{id:2,value:”XYZ”}];

// Using memory to populate the list.

              this.categoryMultiSelector.set('store', new Memory({

                        data: dropList

                    }));

                    this.categoryMultiSelector.set('value', this.dropList[0].value);

 

0 Kudos
AnthonyAtkins2
New Contributor III

Did you ever get this figured out? ESRI's tutorials are okay, but not having an example for every situation is kind of difficult.  And going to Dojo's site/documentation isn't very helpful either.

0 Kudos