DropDownList - Virtual Scrolling

SQL DataSource

Select Customers:

ODataSource

Select Product:

WebService

Select Supplier:
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The Demo demonstrates how Virtual Scrolling can be used in different DataBinding scenarios. The feature provides similar behavior as the LOD, but enables access to items in a non-sequential manner. For instance, if you want to scroll to the bottom of the DropDown, you won’t need to load all the items in between.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • DropDownListSuppliers.cs
<%@ Page  CodeFile="DefaultCS.aspx.cs" Inherits="DropDownList.Examples.Functionality.VirtualScrolling.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadODataDataSource runat="server" ID="RadODataDataSource1">
        <Schema>
            <telerik:DataModel ModelID="Products" Set="Products">
                <telerik:DataModelField FieldName="ProductID" />
                <telerik:DataModelField FieldName="ProductName" />
            </telerik:DataModel>
        </Schema>
    </telerik:RadODataDataSource>

    <div class="demo-container size-thin">
        <h2>SQL DataSource</h2>
        <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="RadDropDownList1"  DataSourceID="SqlDataSource1" Width="300px" DefaultMessage="Select Customers:"
            DropDownHeight="200px" EnableVirtualScrolling="true" DataValueField="CustomerID" DataTextField="ContactName">
        </telerik:RadDropDownList>
    </div>

    <div class="demo-container size-thin">
        <h2>ODataSource</h2>
        <telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList2" runat="server"  Width="300px" DropDownHeight="200px" DefaultMessage="Select Product:" EnableVirtualScrolling="true"
            DataModelID="Products" DataTextField="ProductName" ODataDataSourceID="RadODataDataSource1" DataValueField="ProductID">
        </telerik:RadDropDownList>
    </div>

    <div class="demo-container size-thin">
        <h2>WebService</h2>
        <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="RadDropDownList3"  Width="300px" DefaultMessage="Select Supplier:"
            DropDownHeight="200px" EnableVirtualScrolling="true" DataTextField="CompanyName" DataValueField="SupplierID">
            <WebServiceSettings Method="LoadSuppliers" Path="DropDownListSuppliers.asmx" />
        </telerik:RadDropDownList>

    </div>

    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CustomerID], [ContactName] FROM [Customers] ORDER By ContactName"></asp:SqlDataSource>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?