November Happy Hour will be moved to Thursday December 5th.

Inter connected drop-downs not working

Vote:
 

So I have followed this tutorial

https://world.episerver.com/blogs/Duong-Nguyen/Dates/2014/1/Country-Region-drop-down-lists-in-All-properties-mode/

in my effort to create dependent drop downs. 

    public class LocationBlock : BlockData
    {
        [SelectOne(SelectionFactoryType = typeof(CountrySelectionFactory))]
        public virtual string Country { get; set; }

        [SelectOne(SelectionFactoryType = typeof(RegionSelectionFactory))]
        [ClientEditor(ClientEditingClass = "alloy/editors/FilterableSelectionEditor", SelectionFactoryType = typeof(RegionSelectionFactory))]
        public virtual string Region { get; set; }
    }
    public class ArticlePage : StandardPage
    {
        [Display(GroupName = "IndexData")]
        public virtual LocationBlock Location { get; set; }
    }
class CountrySelectionFactory : ISelectionFactory
    {
        public IEnumerable GetSelections(ExtendedMetadata metadata)
        {
            return new Country[]
            {
            new Country() { CountryCode = "US", Name = "United States" },
            new Country() { CountryCode = "SE", Name = "Sweden" }
            };
        }
    }


    class RegionSelectionFactory : ISelectionFactory
    {
        public IEnumerable GetSelections(ExtendedMetadata metadata)
        {
            return new Region[]
            {
            new Region() { CountryCode = "US", RegionCode = "NY", Name = "New York" },
            new Region() { CountryCode = "US", RegionCode = "CA", Name = "California" },

            new Region() { CountryCode = "SE", RegionCode = "AB", Name = "Stockholm" },
            new Region() { CountryCode = "SE", RegionCode = "O", Name = "Västra Götaland" }
            };
        }
    }

    class Country : ISelectItem
    {
        public string CountryCode { get; set; }
        public string Name { get; set; }

        public string Text
        {
            get
            {
                return Name;
            }
        }

        public object Value
        {
            get
            {
                return CountryCode;
            }
        }
    }

    class Region : ISelectItem
    {
        public string CountryCode { get; set; }
        public string RegionCode { get; set; }
        public string Name { get; set; }

        public string Text
        {
            get
            {
                return Name;
            }
        }

        public object Value
        {
            get
            {
                return String.Format("{0}-{1}", CountryCode, RegionCode);
            }
        }
    }
    [EditorDescriptorRegistration(TargetType = typeof(LocationBlock))]
    public class LocationBlockEditorDescriptor : EditorDescriptor
    {
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable attributes)
        {
            base.ModifyMetadata(metadata, attributes);

            metadata.Properties.Cast().First().GroupSettings.ClientLayoutClass = "alloy/LocationBlockContainer";

            metadata.Properties.Cast().First().ClientEditingClass = "alloy/editors/FilterableSelectionEditor";
        }
    }




After that I created a ClientResources folder in my root. Under that I created Scripts folder and placed LocationBlockConatiner there and under Scripts I created another folder named Editors and placed my FilterableSelectionEditor there. 

I created a module.config file and the code in it looks like this



  
    
    
      
      
    
  

LocationBlockContainer is this

define([
    "dojo/_base/declare",
    "dojo/_base/lang",

    "epi/shell/layout/SimpleContainer"
],
    function (
        declare,
        lang,

        SimpleContainer
    ) {

        return declare([SimpleContainer], {
            countryDropdown: null,
            regionDropdown: null,

            addChild: function (child) {
                // Summar: Add a widget to the container

                this.inherited(arguments);

                if (child.name.indexOf("country") >= 0) {
                    // If it's the country drop down list
                    this.countryDropdown = child;

                    // Connect to change event to update the region drop down list
                    this.own(this.countryDropdown.on("change", lang.hitch(this, this._updateRegionDropdown)));
                } else if (child.name.indexOf("region") >= 0) {
                    // If it's the region drop down list
                    this.regionDropdown = child;

                    // Update the region drop down
                    this._updateRegionDropdown(this.countryDropdown.value);
                }
            },

            _updateRegionDropdown: function (country) {

                console.log(1);

                if (country !== "" && this.previousCountry === "") {
                    this.previousCountry = country;
                }
                // Clear the current value
                if (country !== this.previousCountry) {
                    this.regionDropdown.set("value", null);
                    this.previousCountry = country;
                }


                console.log(this.regionDropdown);

                // Set the filter
                this.regionDropdown.set("filter", function (region) {

                    console.log(region);

                    return region.value.indexOf(country) === 0;
                });

            }
        });
    });

FilterableSelectionEditor.js is this

define([
    "dojo/_base/declare",
    "dojo/_base/array",

    "epi-cms/contentediting/editors/SelectionEditor"
],
    function (
        declare,
        array,

        SelectionEditor
    ) {

        return declare([SelectionEditor], {
            _allOptions: null,

            filter: null,

            _setOptionsAttr: function (options) {
                // summary: set the options

                this._allOptions = options;

                this.inherited(arguments, [array.filter(options, this.filter || function () {
                    // return all options if no filter function provided.
                    return true;
                }, this)]);
            },

            _setFilterAttr: function (filter) {
                // summary: set the option filter function

                this._set("filter", filter);

                this.set("options", this._allOptions);
            }
        });
    });

It doesn't seem to work. When I select Country the Regions are emptied and then every region is added again because the end result shows all the regions no matter what country I have selected. 

Any help here would be really appreciated. 

#186084
Dec 12, 2017 7:37
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.