Stealth Paging with C1Flexgrid WPF

Paging is a common term when it comes to handling a large volume of data. It allows a developer to show only a fixed set of rows at a time and pull the next set of rows on demand, thereby improving the overall user experience. In this blog, I'll show how you can efficiently handle large sets of data while avoiding a significant hit in performance and reduce the waiting time for the data to load. This blog implementation uses the concept of Stealth Paging with C1Flexgrid for WPF. Stealth Paging refers to the concept of retrieving data in background just before it is needed. We start by loading C1Flexgrid with only a small amount of data, just enough to fill the initial grid space. Now when the user starts scrolling, and reaches the end of available rows, we fetch additional data and add it to the existing data collection. User can continue scrolling without ever realizing that data is being fetched in the background. Let's see the implementation.

Create WCF Service Library

We will use WCF service to provide data to client. Add a new WCF Service Library project and Name it as PeopleDataService. This will generate two Class files IService1.cs and Service1.cs. Rename both the files as IPeopleService.cs and PeopleService.cs. Next we need to define a data contract as a Person class that will be sent back to the client and this needs to be done in the IPeopleService.cs. When you open this Class file, you will already see a default definition block for DataContract. Replace the existing code with the code below.

[DataContract]  
public class PeopleClass  
{  
  private string _firstName;  
  [DataMember]  
  public string FirstName  
  {  
    get { return _firstName; }  
    set { _firstName = value; }  
  }  

  private string _lastName;  
  [DataMember]  
  public string LastName  
  {  
    get { return _lastName; }  
    set { _lastName = value; }  
  }  

  private int _age;  
  [DataMember]  
  public int Age  
  {  
    get { return _age; }  
    set { _age = value; }  
  }  

  private string _city;  
  [DataMember]  
  public string City  
  {  
    get { return _city; }  
    set { _city = value; }  
  }  
}  

Once we have the structure of the data to be defined as DataContract, next step is to add a method GetData to the code behind PeopleService.cs. Add the following code snippets in the required files as mentioned below.

IPeopeleService.cs

[OperationContract]  
ObservableCollection GetData(int startRow, int endRow);  

PeopleService.cs

public ObservableCollection<PeopleClass> GetData(int startRow, int endRow)  
{  
  ObservableCollection<PeopleClass> personList = new ObservableCollection<PeopleClass>();  
  for (int i = startRow; i < endRow; i++)  
  {  
    personList.Add(new PeopleClass()  
    {  
      FirstName = string.Format("First Name {0}", i),  
      LastName = string.Format("Last Name {0}", i),  
      Age = i,  
      City = string.Format("City {0}", i)  
    });  
  }  

  return personList;  
}  

The above section handles the Data flow. Next section shows how the data is retrieved and displayed in the grid UI.

Define UserInterface in XAML

Add the required references for C1Flexgrid WPF and add the following XAML code.

<c1flex:C1FlexGrid Name="peopleDataGrid" AutoGenerateColumns="False">  
 <c1flex:C1FlexGrid.Columns>  
   <c1flex:Column Header="First Name" Binding="{Binding FirstName}" Width="125"/>  
   <c1flex:Column Header="Last Name" Binding="{Binding LastName}" Width="125"/>  
   <c1flex:Column Header="Age" Binding="{Binding Age}"/>  
   <c1flex:Column Header="City" Binding="{Binding City}" Width="125"/>  
 </c1flex:C1FlexGrid.Columns>  
</c1flex:C1FlexGrid>  

Implement Stealth Paging

This section defines the actual handling of data to be displayed when the user scrolls the grid. As the grid is scrolled to the end, new set of records are fetched using the WCF service.

void peopleDataGrid_ScrollPositionChanged(object sender, EventArgs e)  
{  
  if (this.\_people.Count >= \_maxRecord)  
   return;  

  if (this.peopleDataGrid.ViewRange.Row2 == this._people.Count - 1)  
  {  
    if ((\_startRow + \_pageSize) < _maxRecord)  
      GetData(\_startRow, \_startRow + _pageSize);  
    else  
      GetData(\_startRow, \_startRow + (\_maxRecord - \_startRow));  
  }  
}  

private void GetData(int startRow, int endRow)  
{  
  PeopleServiceClient proxy = new PeopleServiceClient();  
  var peopleList = proxy.GetData(startRow, endRow);  
  \_startRow += \_pageSize;  
  foreach (PeopleClass person in peopleList)  
  {  
    _people.Add(person);  
  }  
}  

This brings us to the end of the blog. Here we are loading 15 rows at startup. When user scrolls to the end, 15 more records are fetched until maximum of 100 records are retrieved. Click on the image below to see the application demo. Refer to the attached samples for complete implementation. Download C# Sample Download VB Sample