RadListBox Load On Demand Overview

1. Set the EnableLoadOnDemand property to true

2. Set Height to RadListBox. If the EnableLoadOnDemand property is set to true , but there is no Height set, RadListBox will not utilize on demand loading. (The Height property is needed in order scrollbars to appear).

3. Assign a data source to RadListBox, this can be done both from code-behind or declaratively

The DataSource property needs to be set each and every time the server is hit. This is necessary, because when Load On Demand is used, RadListBox doesn’t keep track of its items. They are not added to the Items collection and thus not allowing manipulating them on the server. RadListBox Load on Demand is entirely client feature.

Here is short example of how RadListBox should be bound in a Load on Demand scenarios:

CopyASPX

<telerik:RadListBox runat="server" ID="RadListBox1" Height="200px" 

                    EnableLoadOnDemand="true" Width="300px">

• C#
• VB.NET

CopyC#

protected void Page_Load(object sender, EventArgs e)
{

    RadListBox1.DataSource = GetData();

    if (!Page.IsCallback)
    {
        RadListBox1.DataBind();
    }

}

private static int[] GetData()
{

    var itemsCount = 300;
    var arr = new int[itemsCount];

    for (var i = 0; i < itemsCount; i++)
    {
        arr[i] = i;
    }
    return arr;

}

CopyVB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

    RadListBox1.DataSource = GetData()

    If Not Page.IsCallback Then
        RadListBox1.DataBind()
    End If

End Sub

Private Shared Function GetData() As Integer()

    Dim itemsCount = 300
    Dim arr = New Integer(itemsCount - 1) {}

    For i As var = 0 To itemsCount - 1
        arr(i) = i
    Next
    Return arr

End Function

Another example, demonstrating binding to a declarative datasource. In this case there is no code behind code needed. One only need to set the DataSourceID and DataTextField property of RadListBox:

CopyASPX

 <telerik:RadListBox runat="server" ID="RadListBox1" Height="200px" DataKeyField="ProductID"
    DataTextField="ProductName" DataValueField="ProductID"
    EnableLoadOnDemand="true" Width="300px" CheckBoxes="true" DataSourceID="SqlDataSource1">
</telerik:RadListBox>

<asp:SqlDataSource runat="server" ID="SqlDataSource1" 
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
    SelectCommand="SELECT [ProductID], [ProductName] FROM [Alphabetical list of products]">
</asp:SqlDataSource>

Since RadListBox utilizes ASP.NET Callbacks for Load on Demand it is necessary,that we use the not Page is Callback condition for binding it. This means that RadListBox should only be bound on initial load after which the callback mechanism will take care of data binding.

On client-side, Load on demand is triggered in the following occasions:

1. Scroll using the mouse wheel –this fires LOD as items are being scrolled.

2. Scroll via moving the scrollbar- this fires LOD on mouse up, i.e. the items are going to be requested only after the user has finished scrolling.

Note
RadListBox will load only the items that fit in the visible area.

Accessing item using the API :

Note
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. Example:

  CopyJavaScript

  <script type="text/javascript">
      function requestItem() {
          var listBox = $find("RadListBox1");
          var item = listBox.getItemAsync(60, function(item) { alert(item.get_text()); });
      }
  </script>

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.

Tip
You could use RadLoadingPanel to display loading template between the AJAX requests. Just place a loading panel on the page and set the LoadingPanelID property of the ListBox to the RadLoadingPanel ones.

Note
Load On Demand limitations: Any server-side operations (Transfer,Reoderder, SelectedIndexChanged) are not supported on the server. RadListBox LOD is entirely client feature. Client-side Reordering is not supported in LOD scenarios Whereas transferring the selected items is possible, transfer all items is not supported since in LOD scenarios this would most likely cause the browser to halt.

Other Resources