Telerik UI for Windows Phone

The OnDemandManual virtualization mode allows the end-user to decide when more data items will be downloaded and displayed in the RadDataBoundListBox control. In this mode, a specialized item is displayed at the end of the scrollable list which, when tapped, fires the DataRequested event of the RadDataBoundListBox control allowing the developer to download and load another portion of data items.

To define how the specialized virtualization item will look like you can use the DataVirtualizationItemContent and DataVirtualizationItemTemplate properties of the RadDataBoundListBox control. The following XAML code demonstrates a possible way of setting these properties:

CopyXAML
<telerikPrimitives:RadDataBoundListBox Grid.Row="1" EmptyContent=" " DataVirtualizationMode="OnDemandAutomatic">
<telerikPrimitives:RadDataBoundListBox.DataVirtualizationItemTemplate>
<DataTemplate>
<Button Content="load more" HorizontalAlignment="Stretch" x:Name="btnLoadMore" Click="btnLoadMore_Click" />
</DataTemplate>
</telerikPrimitives:RadDataBoundListBox.DataVirtualizationItemTemplate>
</telerikPrimitives:RadDataBoundListBox>

In this case, the specialized item consists of a button which, when tapped, requests more data items to be downloaded and loaded into the data list bound to the control.

To use the OnDemandManual virtualization mode simply set the DataVirtualizationMode property of RadDataBoundListBox to DataVirtualizationMode.OnDemandManual as the code snippet below demonstrates:

CopyC#
this.radDataBoundListBox1.DataVirtualizationMode = DataVirtualizationMode.OnDemandManual;

You will also need to handle the DataRequested event which will be fired when more data has to be loaded:

CopyC#
this.radDataBoundListBox1.DataRequested = this.OnDataRequested;

private void OnDataRequested(object sender, EventArgs args)
{
//TODO: download data items
}

In this virtualization mode you will have to keep track of which items have already been downloaded in order to maintain the logical order of the data items. The code snippet below demonstrates a very simple scenario using the OnDemandManual virtualization mode:

CopyC#
private DataServiceContext dataServiceContext;
private DataServiceCollection<Item> ebayItemsCollection;
private ObservableCollection<Item> itemsSource;
private int currentEndIndex = 0;
private bool requestIssued = false;

public void Init()
{
this.itemsSource = new ObservableCollection<Item>();
this.radDataBoundListBox1.DataRequested += this.OnListBox_DataRequested;
this.InitializeOdataService();
this.radDataBoundListBox1.ItemsSource = this.itemsSource;
}

private void InitializeOdataService()
{
Uri serviceUri = new Uri("http://ebayodata.cloudapp.net");
this.dataServiceContext = new DataServiceContext(serviceUri);
this.ebayItemsCollection = new DataServiceCollection<Item>(this.dataServiceContext);
this.ebayItemsCollection.LoadCompleted += new
EventHandler<LoadCompletedEventArgs>(postsCollection_LoadCompleted);
}

private void LoadItems(int count)
{
if (NetworkInterface.GetIsNetworkAvailable())
{
Uri loadUri = new Uri("/Items/?search='dvds'&$top=" + count + "&$skip=" + this.currentEndIndex, UriKind.Relative);
this.ebayItemsCollection.LoadAsync(loadUri);
this.currentEndIndex += count;
}
else
{
this.Dispatcher.BeginInvoke(() =>
{
this.radDataBoundListBox1.ItemsSource = null;
MessageBox.Show("No Internet connection.
This example needs Internet access to function properly.");
});
}
}

private void postsCollection_LoadCompleted(object sender, LoadCompletedEventArgs e)
{
if (e.Error != null)
{
MessageBox.Show("It seems that there is no Internet connection.
This example needs to connect to the Internet in order to function properly.");
this.requestIssued = false;
return;
}
this.radDataBoundListBox1.IsBusy = false;
foreach (Item p in this.ebayItemsCollection)
{
this.itemsSource.Add(p);
}
this.ebayItemsCollection.Clear();
if (e.Cancelled)
{
this.DisableVirtualization();
}
if (this.currentEndIndex > 200)
{
this.DisableVirtualization();
}
this.requestIssued = false;
}

private void OnListBox_DataRequested(object sender, EventArgs e)
{
if (this.requestIssued)
{
return;
}
this.LoadItems(20);
this.requestIssued = true;
}