New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Virtual Scrolling

SQL DataSource

Select Customers:

ODataSource

Select Product:

WebService

Select Supplier:

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.

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

<!DOCTYPE html>
<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="100%" 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