WebDropDown1.DataSource = SqlDataSource1 WebDropDown1.TextField = "ProductName" WebDropDown1.DataBind()
WebDropDown™ supports the lazy loading feature, which allows you to provide data to the WebDropDown control when the end-user tries to open the drop-down container or when they try to type into the value display. This feature greatly improves the performance of your application, especially when you have many WebDropDown controls on a page.
From the Visual Studio® Toolbox, drag and drop a ScriptManager component, a WebDropDown control and a SqlDataSource component onto the form.
Configure the SqlDataSource to retrieve the Products table of the Northwind database.
Add the following code to the WebDropDown control’s ItemsRequested server-side event so that WebDropDown binds to the SqlDataSource:
In Visual Basic:
WebDropDown1.DataSource = SqlDataSource1 WebDropDown1.TextField = "ProductName" WebDropDown1.DataBind()
In C#:
WebDropDown1.DataSource = SqlDataSource1; WebDropDown1.TextField = "ProductName"; WebDropDown1.DataBind();
Add the following code to your Page Load event handler in order to implement the WebDropDown control’s ValueChanging and DropDownOpening client-side events:
In Visual Basic:
WebDropDown1.ClientEvents.DropDownOpening = "WebDropDown_DropDownOpening" WebDropDown1.ClientEvents.ValueChanging = "WebDropDown_ValueChanging"
In C#:
WebDropDown1.ClientEvents.DropDownOpening = "WebDropDown_DropDownOpening"; WebDropDown1.ClientEvents.ValueChanging = "WebDropDown_ValueChanging";
In JavaScript:
// The client event ‘DropDownOpening’ takes two parameters sender and e // sender is the object which is raising the event // e is the DropDownContainerEventArgs function WebDropDown_DropDownOpening(sender, e) { //Gets reference to the WebDropDown control var wdd = $find("WebDropDown1"); wdd.loadItems(); } // The client event ‘ValueChanging’ takes two parameters sender and e // sender is the object which is raising the event // e is the DropDownEditEventArgs function WebDropDown_ValueChanging(sender, e) { //Gets reference to the WebDropDown control var wdd = $find("WebDropDown1"); wdd.loadItems(); }
In the above code, the loadItems method in the DropDownOpening client-side event fires the ItemsRequested server-side whenever the end-user clicks the drop-down button. Similarly, the loadItems method in the ValueChanging client-side event fires the ItemsRequested server-side event when the end-user starts typing in the value display. As soon as the ItemsRequested event fires the WebDropDown control binds to the Sql data source.