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.