Cascading Dropdowns In RBS

[edcredegas]

I am sure that this will all make sense once I have added a couple of components but for now I am lost in the breadth of it all and am struggling to relate the VS examples to the use of RBS. So I am hoping that someone can give me a steer.

I have 3 Dimension joined by 2 relationship tables describing a hierarchy across those dimensions, eg. Country <> State <> City

I want in an edit page to either populate the RadzenTree Component or 3 RadzenDropDown components and once the ‘City’ is selected it be the update that is submitted by the page.

A lot to ask I know but if someone could give me just the high level steps required in the query builder, and properties involved in this I can then try to piece it together.

Thank you

[korchev]

Hi @edcredegas,

Here is a demo that uses the Northwind database and displays a Category <> Product relationship via cascading dropdownd (selecting a category filters the products dropdown).

The demo assumes a new data source has been added with name Northwind.

1. Drag and drop two dropdowns.
2. Run the configuration wizard for the first dropdown (that will display categories) and configure it like this:
   
   
   This will populate the category dropdown with the result returned by the GetCategories() method that has been generated for the Northwind data source.
3. Run the configuration wizard for the second dropdown (that will display products) and configure it:
   
4. Add a new field to the page that will store the selected category. Use the Data design tab if you want to do it visually:
   
   
   
   
   
5. Set the Value property of the first combobox to the newly created field. Use the button to visually select the selectedCategoryId field:
   
   
   
   
   
6. Add a new event handler for the Change event of the category dropdown:
   
   
   
   In the change event handler we will invoke the GetProducts() method and filter the products by the selectedCategoryId field. This will do the cascading.
7. Add a new Invoke statement in the method builder. Set method to GetProducts()
   
   
8. Assign the Result of the invoke to a new variable called result.
   
   
9. Finally add a new Assignment statement and set products to result.Value. This will assign the Value property of the result returned by the GetProducts() method to the products collection which is what the dropdown displays. This is specific to WASM applications and for Blazor server applications the assignment should be just products to result.

Here is a download link to the application. It uses a SQLite Northwind database so it is ready to use.

[edcredegas]

You are a gentleman and scholar. Thank you so much. I will give this a go.