none
cascading dropdown using office ui fabric-react dropdow RRS feed

  • Question

  • I am using the example from Github, but I am not sure how to filter the second dropdown list based on the selected value in the first list:

    <MyAsyncDropdown label ="Select a site"
              loadingLabel = "loading"
              errorLabelFormat = "error"
              loadOptions = {this.loadSiteUrlOptions.bind(this)}
              onChange= {this.onChange.bind(this)}
            /> 
            <hr />
    
        <MyAsyncDropdown label ="Select a web"
          loadingLabel = "loading"
          errorLabelFormat = "error"
          loadOptions = {this.loadWebUrlOptions.bind(this)}
          onChange= {this.onChange.bind(this)}
        /> 

    here are the functions which populate the options of each dropdownlist:

    private loadSiteUrlOptions(): Promise<IDropdownOption[]> {
    
        return this.ContentQueryService.getSiteUrlOptions();
      }
    
      private loadWebUrlOptions(): Promise<IDropdownOption[]> {
        return this.ContentQueryService.getWebUrlOptions(this.props.siteUrl);
      }

    how can I filter the values second dropdownlist based on onchange function? Which is this:

      private onChange(propertyPath: string, newValue: any): void {
    
      }

    I am not using property panes. I am using the dropdowns directly in the web part.

    Friday, June 22, 2018 9:16 AM

All replies

  • Hi,

    Here is test demo for your reference.

    Reference the AsyncDropdown from the shared project.


    I wrapped my source code in below so you could get it.

    Sample result:



    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Tuesday, June 26, 2018 9:35 AM
  • Hi,

    I am checking to see how things are going there on this issue. Please let us know if you would like further assistance.

    You can mark the helpful post as answer to help other community members find the helpful information quickly.

    You can also share your own solution here and mark it as answer, and we can learn from each other.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Monday, July 2, 2018 8:53 AM
  • Hi,

    I am going to give it a try shortly. I will let you know about my results. Thanks for your help.

    Monday, July 2, 2018 8:12 PM
  • Hi,

    I am checking to see how things are going there on this issue. Please let us know if you would like further assistance.

    You can mark the helpful post as answer to help other community members find the helpful information quickly.

    You can also share your own solution here and mark it as answer, and we can learn from each other.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Thursday, July 5, 2018 8:13 AM