Step 3 of 3: Connecting the Web Service and Adding Stealth Paging

In the previous step you created a Web Service and added a data source to your project. In this step you'll continue by linking the Web Service to your application.

To set up your project, complete the following steps:

1. Return to the MainPage.xaml file.

1. In the Solution Explorer, right-click the project name and select Add Service Reference from the context menu.

2. In the Add Service Reference dialog box click the Discover button. The DataWebService.asmx file will appear in the list of Services.

3. In the Namespace text box, change the default value to "DataService" and click the OK button to save your settings and close the dialog box.

4. Customize your grid by adding LoadedRowPresenter="peopleDataGrid_LoadedRowPresenter" to the <c1:C1DataGrid> tag so that it appears similar to the following:

<c1:C1DataGrid x:Name="peopleDataGrid" AutoGenerateColumns="True" CanUserAddRows="False" LoadedRowPresenter="peopleDataGrid_LoadedRowPresenter">

This markup adds an event handler – you'll add code for the event handler in the next steps.

5. In the Solution Explorer, expand the MainPage.xaml node and double-click the MainPage.xaml.cs or MainPage.xaml.vb file to open it in the Code Editor.

6. Add the following import statements at the top of the file:

· Visual Basic

Imports System.Runtime.Serialization

Imports System.Collections.ObjectModel

Imports System.ServiceModel

Imports C1.Silverlight

Imports C1.Silverlight.DataGrid

Imports StealthPaging.DataService ' Change this if the name of your project is different.

· C#

using System.Runtime.Serialization;

using System.Collections.ObjectModel;

using System.ServiceModel;

using C1.Silverlight;

using C1.Silverlight.DataGrid;

using StealthPaging.DataService; // Change this if the name of your project is different.

7. Add the following variables to the MainPage class:

· Visual Basic

Dim _startRow As Integer = 0

Dim _pageSize As Integer = 20

Dim _people As New ObservableCollection(Of ServerPerson)()

Dim _loading As Boolean

· C#

int _startRow = 0;

int _pageSize = 20;

ObservableCollection<ServerPerson> _people = new ObservableCollection<ServerPerson>();

bool _loading;

8. Add code to the MainPage constructor so it appears like the following:

· Visual Basic

Public Sub New()

InitializeComponent()

AddHandler peopleDataGrid.LoadedRowPresenter, AddressOf peopleDataGrid_LoadedRowPresenter

peopleDataGrid.ItemsSource = _people

GetData(_startRow, _pageSize)

End Sub

· C#

public MainPage()

{

InitializeComponent();

peopleDataGrid.LoadedRowPresenter += new EventHandler<DataGridRowEventArgs>(peopleDataGrid_LoadedRowPresenter);

peopleDataGrid.ItemsSource = _people;

GetData(_startRow, _pageSize);

}

9. Add the LoadedRowPresenter event handler to your code under the MainPage constructor:

· Visual Basic

Private Sub peopleDataGrid_LoadedRowPresenter(ByVal sender As System.Object, ByVal e As C1.Silverlight.DataGrid.DataGridRowEventArgs)

If _loading OrElse _people.Count < _pageSize Then

Return

End If

If _people.Count - 5 < e.Row.Index Then

GetData(_startRow, _startRow + _pageSize)

End If

End Sub

· C#

private void peopleDataGrid_LoadedRowPresenter(object sender, C1.Silverlight.DataGrid.DataGridRowEventArgs e)

{

if (_loading || _people.Count < _pageSize)

{

return;

}

if (_people.Count - 5 < e.Row.Index)

{

GetData(_startRow, _startRow + _pageSize);

}

10. Add the following code to retrieve data from the server:

· Visual Basic

#Region "retrieve data from the server"

Private Sub GetData(startRow As Integer, endRow As Integer)

UpdateState(True, startRow, endRow)

' Call web service

Dim proxy = New DataWebServiceSoapClient(New BasicHttpBinding(), New EndpointAddress(Extensions.GetAbsoluteUri("DataWebService.asmx")))

AddHandler proxy.GetDataCompleted, AddressOf proxy_GetDataCompleted

proxy.GetDataAsync(startRow, endRow)

End Sub

Private Sub proxy_GetDataCompleted(sender As Object, e As GetDataCompletedEventArgs)

If e.[Error] IsNot Nothing Then

MessageBox.Show(e.[Error].Message, "Error Getting Data", MessageBoxButton.OK)

Return

End If

' Data retrieved OK, add to observable collection

_startRow += _pageSize

For Each person As ServerPerson In e.Result

_people.Add(person)

UpdateState(False, 0, 0)

End Sub

' Sets loading status

' You could use a VisualState here too

Private Sub UpdateState(loading As Boolean, startRow As Integer, endRow As Integer)

If loading Then

txtStatus.Text = String.Format("Retrieving rows {0} to {1}...", startRow, endRow)

Cursor = Cursors.Wait

_loading = True

Else

_loading = False

txtStatus.Text = "Ready"

Cursor = Cursors.Arrow

End If

End Sub

#End Region

· C#

#region retrieve data from the server

private void GetData(int startRow, int endRow)

{

UpdateState(true, startRow, endRow);

// Call Web service

var proxy = new DataWebServiceSoapClient(new BasicHttpBinding(), new EndpointAddress(Extensions.GetAbsoluteUri("DataWebService.asmx")));

proxy.GetDataCompleted += new EventHandler<GetDataCompletedEventArgs>(proxy_GetDataCompleted);

proxy.GetDataAsync(startRow, endRow);

}

void proxy_GetDataCompleted(object sender, GetDataCompletedEventArgs e)

{

if (null != e.Error)

{

MessageBox.Show(e.Error.Message, "Error Getting Data", MessageBoxButton.OK);

return;

}

// Data retrieved OK, add to observable collection

_startRow += _pageSize;

foreach (ServerPerson person in e.Result)

{

_people.Add(person);

}

UpdateState(false, 0, 0);

}

// Sets loading status

// You could use a VisualState here too

private void UpdateState(bool loading, int startRow, int endRow)

{

if (loading)

{

txtStatus.Text = string.Format("Retrieving rows {0} to {1}...", startRow, endRow);

Cursor = Cursors.Wait;

_loading = true;

}

else

{

_loading = false;

txtStatus.Text = "Ready";

Cursor = Cursors.Arrow;

}

#endregion

11. Run your application and observe that the grid appears bound to a data source:

12. Run your application and observe that as you scroll through the grid more rows appear in the grid:

Also note that the text below the grid indicates the rows being added as you scroll.

What You've Accomplished

Congratulations, you've completed this tutorial! In this tutorial you created a new Silverlight project, added a data source, and created a Web Service to bind the C1DataGrid control. You implemented stealth paging, so that when the grid is scrolled at run time, the grid pages through the grid instead, improving performance.