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

    Load On Demand

    5000 items

    • Item 0

    LOD bound to a declarative data source

    • Bon app'

    RadListBox now supports Load On Demand.

    You could enable the functionality by setting the EnableLoadOnDemand property to true and setting a Height to RadListBox. If the EnableLoadOnDemand property is set to true, but there is no Height set, RadListBox will not utilize on demand loading.

    When LOD is turned on, RadListBox will load only the items that fit in the visible area plus few items above and below it, for the sake of not triggering request on a minor scrollbar move and smoother user experience. For this reason, on page load RadListBox will always be displayed with its first items visible.

    The DataSource property needs to be set each and every time the server is hit. This is necessary, because when a request for the next portion of items is fired, the RadListBox needs to calculate the position of the scroll and acquire the corresponding set of items. They are not added to the Items collection and thus not allowing manipulating them on the server. RadListBox Load on Demand is an entirely client feature.

    Load on demand is triggered in the following occasions:

    • Scroll using the mouse wheel - fires LOD as items are being scrolled.
    • Scroll via moving the scrollbar - fires LOD on mouse up, i.e. the items are going to be requested only after the user has finished scrolling.
    • Access item using the API - You need to use the GetItemAsync method instead of GetItem. GetItemAsync accepts two parameters, the index of the item that you seek and a callback function in which the item will be provided. If the sought item is loaded, RadListBox will immediately pass it to the callback. If it is not, a request will be made to the server and upon retrieval the item will be passed as an argument to the provided callback.

    You can use RadAjaxLoadingPanel to display loading template between the AJAX requests. Just place a loading panel on the page and set the RadListBox LoadingPanelID property.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.Functionality.LoadOnDemand.DefaultCS"Language="c#"  %>
     
    <!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" />
        <div class="demo-containers">
            <div class="demo-container size-thin">
                <h2>5000 items </h2>
                <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
                </telerik:RadAjaxLoadingPanel>
                <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox1" Height="200px" Width="300px" LoadingPanelID="<%# RadAjaxLoadingPanel1.ClientID %>"
                    EnableLoadOnDemand="true">
                    <ItemTemplate>
                        Item
                        <%# Container.Text %>
                    </ItemTemplate>
                </telerik:RadListBox>
            </div>
            <div class="demo-container size-thin">
                <h2>LOD bound to a declarative data source </h2>
                <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel2">
                </telerik:RadAjaxLoadingPanel>
                <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox2" CssClass="RadListBox2" Height="200px" LoadingPanelID="<%# RadAjaxLoadingPanel2.ClientID %>"
                    EnableLoadOnDemand="true" DataSourceID="SqlDataSource1" DataTextField="ShipName"
                    DataValueField="OrderID" DataKeyField="OrderID" Width="300px">
                </telerik:RadListBox>
                <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                    SelectCommand="SELECT [OrderID], [ShipName] FROM [Orders]"></asp:SqlDataSource>
            </div>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance