A Cascading List is any set of multiple lists that work together. The end user will first select an item from the first list. This action will cause the second list to be filtered based on the selection of the first list. Subsequent selections will cause subsequent lists to be filtered accordingly. You can cascade any number of WebDropDown™ controls using the WebDropDown control’s SelectionChanging or SelectionChanged client events.
In this walkthrough, a WebDropDown control which is bound to the Products table of the Northwind database filters its value list depending on the selected item of another WebDropDown which is bound to the Categories table of the Northwind database.
You will learn how to cascade two WebDropDown controls.
From the Visual Studio™ Toolbox, drag and drop a ScriptManager component , two WebDropDown controls ,two standard Label controls and two SqlDataSource components onto the form. Set the ID property of the WebDropDown controls as "categoryDropDown" and "productDropDown". Set the Text property of Label1 and Label2 as "Select a Category :" and "Select a Product:" respectively.
Place the controls on the designer such that categoryDropDown is next to the Select a Category Label and productsDropDown is next to the Select a Product Label.
Bind the categoryDropDown to the Categories table of the Northwind database using SqlDataSource1 ; set the TextField property to CategoryName and the ValueField property to CategoryID . Similarly, bind the productDropDown to the Products table of the Northwind database using SqlDataSource2; set the TextField property to ProductName and ValueField property to ProductID. For more information on how to bind WebDropDown to SqlDataSource see the Binding WebDropDown to a Sql Data Source topic.
Add a javascript function "categoryChanged" for the categoryDropDown control’s SelectionChanged client-side event.
In JavaScript:
// The client event 'SelectionChanged' takes two parameters sender and e
// sender is the object which is raising the event
// e is the DropDownSelectionEventArgs
function categoryChanged(sender, e) {
//Gets reference to the productDropDown
var productDropDown = $find("productDropDown");
productDropDown.loadItems(e.getNewSelection()[0].get_value());
}
In the above code, loadItems method fires the productDropDown control’s ItemsRequested server-side event (implemented in the next step) to filter the items in the productDropDown depending on the value of the newly selected categoryDropDown control’s item.
Add the following code to the productDropDown’s ItemsRequested server-side event :
In Visual Basic:
productDropDown.Items.Clear()
SqlDataSource2.SelectCommand =
"SELECT * FROM [Products] where [CategoryID] = '" & DirectCast(e.Value, String) &
"'"
productDropDown.DataBind()
In C#:
productDropDown.Items.Clear();
SqlDataSource2.SelectCommand = "SELECT * FROM [Products] where [CategoryID] = \'" + (string)e.Value + "\'";
productDropDown.DataBind();
In the above code , filtering is done on productDropDown by selecting the items that have the CategoryID equal to the value of the selected item in the categoryDropDown using the SelectCommand.
Save and run your application. Select Grains/Cereals category and your WebForm now looks similar to the following image :
