topic Re: How to create multi select dropdown in ArcGIS Web AppBuilder Questions

How to create multi select dropdown

BrianLeroux — Sun, 12 Dec 2021 01:17:23 GMT

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);
					}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to create multi select dropdown

RobertScheitlin__GISP — Sat, 10 Aug 2019 11:55:26 GMT

Brain,

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

Re: How to create multi select dropdown

BrianLeroux — Mon, 19 Aug 2019 17:44:49 GMT

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.

Re: How to create multi select dropdown

RobertScheitlin__GISP — Mon, 19 Aug 2019 18:43:38 GMT

Nope no doc exists for that.

Re: How to create multi select dropdown

BrianLeroux — Mon, 19 Aug 2019 19:51:20 GMT

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

Re: How to create multi select dropdown

voliv — Fri, 27 Aug 2021 01:50:45 GMT

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.

Re: How to create multi select dropdown

MostafaGhanem — Tue, 25 Jan 2022 12:44:08 GMT

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);

Re: How to create multi select dropdown

AnthonyAtkins2 — Wed, 30 Mar 2022 18:30:55 GMT

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.