Set the dropdownlist to not selected

How-to Discussions
1

Hi there,

I want to de-select the dropdown when a button is clicked. It is like return back to it’s original value, Like Select a Country. I happened to use the combox that was shared in through this link: https://www.youtube.com/watch?v=-jk3jNQzE4U

Everything is working fine with me but I just can’t return the DropDown to its original value after I click the save button for example.
Here is my Code:

          <Rectangle ux:Class="ComboBox" CornerRadius="3" Color="#fff" IconColor="#015055" StrokeColor="#6d6d6d" StrokeWidth="2" Margin="0,10" Alignment="Top">
	<object ux:Property="Options"/>
	<object ux:Property="Selected"/>
	<float4 ux:Property="IconColor" />
		<string ux:Property="Icon" />
				<JavaScript>
			var Observable=require("FuseJS/Observable");
			var self = this;
			var Options=self.Options.inner();
			var selected=self.Selected.inner();
			var isOpen=Observable(false);			
			module.exports={
				isOpen:isOpen,
				Options:Options.map(function(option){
					return{
						title:option,
						isSelected:Observable(function(){
							return selected.value===option;
						}),
						Clicked:function(){					
							selected.value=option;
							if(self.Selected.value instanceof Observable)
							{
								self.Selected.value.value=option;							
							}
							isOpen.value=false;
						}
					}
				}),
				selected:selected,
				toggleOpen:function(){
					isOpen.value=!isOpen.value;
				}
			}
		</JavaScript>			
	      	<Panel ux:Name="header" Clicked="{toggleOpen}" HitTestMode="LocalBoundsAndChildren">			  	
	      		<Text Alignment="CenterLeft" ux:Name="Select" Margin="30,9" Color="#6d6d6d" Value="{selected.NameEn}" />
				<Text Alignment="CenterLeft" ux:Name="IconErr" Margin="9" Color="{ReadProperty IconColor}" FontSize="16" Value="{Property Icon}" Font="FontAwesome" />
	      		<Text Value="&#xf0d7;" Font="FontAwesome" FontSize="20" Color="#ccc" Alignment="CenterRight" Margin="10,5" />
	      		<WhilePressed>
	      			<Change header.Color="#bbb" Duration="1" />
	      		</WhilePressed>
	      	</Panel>
	      	<Panel ux:Name="dropdown" LayoutRole="Inert" Alignment="Top" MaxHeight="300">
	      		<Translation RelativeTo="Size" RelativeNode="this" Y="1" />
	      		<ScrollView>
	      			<StackPanel>
	      				<Each Items="{Options}">						
	      					<Rectangle ux:Name="item" Color="Grn" CornerRadius="3" Clicked="{Clicked}">
	      						<Stroke Offset="1" Color="#fff" Width="1"/>				
	      						<Text Margin="10" Value="{title.NameEn}" Color="#fff" />								 
	      						<WhilePressed>
	      							<Change item.Color="#6d6d6d" Duration="0.05" DurationBack="0.1" />
	      						</WhilePressed>
	      						<WhileTrue Value="{isSelected}">
	      							<Change item.Color="#1a888e" />
	      						</WhileTrue>	      				
	      					</Rectangle>
	      				</Each>
	      			</StackPanel>
	      		</ScrollView>
	      		<WhileFalse Value="{isOpen}">
	      			<Change dropdown.Opacity="0" Duration="0.15" Easing="CubicOut" />
	      			<Change dropdown.Visibility="Hidden" Delay="0.2" />
	      			<Move Y="-300" Duration="0.2" Easing="CubicIn" />
	      		</WhileFalse>
	      	</Panel>
	      </Rectangle>

I have used the above component here:

    <App>
    <JavaScript>
    var Observable = require("FuseJS/Observable");
    var Nationality = Observable({NameEn:"USA",ID:1},{NameEn:"Korea",ID:2},{NameEn:"Banama",ID:3},{NameEn:"Qatar",ID:4});
	var NationalitySelect=Observable({NameEn:"Select Nationality",ID:0});
    function ClearDDl()
    {
        Nationality.value=0;
    }
    module.exports={
        Nationality,
        ClearDDl,
        NationalitySelect
    }
    </JavaScript>
    <Panel>
        <ComboBox Alignment="Center" ux:Name="Nations" Icon="&#xf0ac;" Options="{Nationality}" Selected="{NationalitySelect}" >																						
		</ComboBox>
        <Rectangle Width="250" Alignment="Bottom" Clicked="{ClearDDl}" Margin="0,0,0,100" Height="40" CornerRadius="15" Color="#015055">        
        <Text Alignment="Center" Value="Clear" FontSize="16" Color="#fff"/>
        </Rectangle>
         </Panel>
       </App>

Any Help?

2

Hey!

First, if you want something to deselect, you actually need to select something. By default, your Combobox have Selected property with the Select Nationality value from javascript. This is our “deselected” option. To deselect, change the Selected value back to Select Nationality. If you want to save or validate the selected value, you could check ID value. For example, a user cannot save, if the value is 0.

Here is modified code, to get dropdown “deselected” value on click.

<App>
  <JavaScript>
  var Observable = require("FuseJS/Observable");
  var Nationality = Observable(
    {NameEn:"USA",ID:1},
    {NameEn:"Korea",ID:2},
    {NameEn:"Banama",ID:3},
    {NameEn:"Qatar",ID:4}
  );
  var NationalitySelect = Observable(
    {NameEn:"Select Nationality",ID:0}
  );
  function ClearDDl() {
      NationalitySelect.value = {NameEn:"Select Nationality",ID:0};
  }
  module.exports = {
      Nationality: Nationality,
      NationalitySelect: NationalitySelect,
      ClearDDl: ClearDDl
  }
  </JavaScript>
  <Rectangle ux:Class="ComboBox" CornerRadius="3" Color="#fff" IconColor="#015055" StrokeColor="#6d6d6d" StrokeWidth="2" Margin="0,10" Alignment="Top">
   <object ux:Property="Options"/>
   <object ux:Property="Selected"/>
   <float4 ux:Property="IconColor" />
   <string ux:Property="Icon" />
     <JavaScript>
       var Observable = require("FuseJS/Observable");
       var self = this;
       var Options = self.Options.inner();
       var selected = self.Selected.inner();
       var isOpen = Observable(false);
       module.exports = {
          isOpen:isOpen,
          Options:Options.map(function(option){
             return{
                title:option,
                isSelected:Observable(function(){
                   return selected.value === option;
                }),
                Clicked:function(){
                   selected.value = option;
                   if(self.Selected.value instanceof Observable)
                   {
                      self.Selected.value.value = option;
                   }
                   isOpen.value=false;
                }
             }
          }),
          selected:selected,
          toggleOpen:function(){
             isOpen.value =! isOpen.value;
          }
       }
    </JavaScript>
    <Panel ux:Name="header" Clicked="{toggleOpen}" HitTestMode="LocalBoundsAndChildren">
       <Text Alignment="CenterLeft" ux:Name="Select" Margin="30,9" Color="#6d6d6d" Value="{selected.NameEn}" />
       <Text Alignment="CenterLeft" ux:Name="IconErr" Margin="9" Color="{ReadProperty IconColor}" FontSize="16" Value="{Property Icon}" Font="Bold" />
       <Text Value="&#xf0d7;" Font="Bold" FontSize="20" Color="#ccc" Alignment="CenterRight" Margin="10,5" />
       <WhilePressed>
          <Change header.Color="#bbb" Duration="1" />
       </WhilePressed>
    </Panel>
    <Panel ux:Name="dropdown" LayoutRole="Inert" Alignment="Top" MaxHeight="300">
       <Translation RelativeTo="Size" RelativeNode="this" Y="1" />
       <ScrollView>
          <StackPanel>
             <Each Items="{Options}">
                <Rectangle ux:Name="item" Color="Green" CornerRadius="3" Clicked="{Clicked}">
                   <Stroke Offset="1" Color="#fff" Width="1"/>
                   <Text Margin="10" Value="{title.NameEn}" Color="#fff" />
                   <WhilePressed>
                      <Change item.Color="#6d6d6d" Duration="0.05" DurationBack="0.1" />
                   </WhilePressed>
                   <WhileTrue Value="{isSelected}">
                      <Change item.Color="#1a888e" />
                   </WhileTrue>
                </Rectangle>
             </Each>
          </StackPanel>
       </ScrollView>
       <WhileFalse Value="{isOpen}">
          <Change dropdown.Opacity="0" Duration="0.15" Easing="CubicOut" />
          <Change dropdown.Visibility="Hidden" Delay="0.2" />
          <Move Y="-300" Duration="0.2" Easing="CubicIn" />
       </WhileFalse>
    </Panel>
  </Rectangle>

  <Panel>
    <ComboBox Alignment="Center" ux:Name="Nations" Icon="&#xf0ac;" Options="{Nationality}" Selected="{NationalitySelect}" />
    <Rectangle Width="250" Alignment="Bottom" Clicked="{ClearDDl}" Margin="0,0,0,100" Height="40" CornerRadius="15" Color="#015055">
      <Text Alignment="Center" Value="Clear" FontSize="16" Color="#fff"/>
    </Rectangle>
   </Panel>
</App>

Hope this helps.

3

Just as expected !!!

This worked very well thanks for the heads up, appropriate the help.