DataPager with Displaying Record Number - Silverlight

• Download AdvancedDataPager.zip - 929.4 KB

Introduction 

Pagination (DataPager) is a built-in control in Silverlight 3.0. I have extended its behavior and implemented functionality for “Displaying X – Y of Z Records”.
 

I have published article at http://saffroze.com/advanced-datapager-with-displaying-record-number-in-silverlight/  

Background 

Here are some background definition of DataPager elements

1. DataPager
   The DataPager class is used to page data and to display navigation controls for data-bound controls and displaying text like “Displaying records 1-5 of 12”.
   

   <Control:DataPagerPlus Name="pagerEmployees" Grid.Row="1" PageSize="5" VerticalAlignment="Top" HorizontalAlignment="Stretch" /> 

2. PagedCollectionView
   Represents a view for grouping, sorting, filtering, and navigating a paged data collection 

   PagedCollectionView employees = new PagedCollectionView(Employees.Load()); 

3. ResourceDictionary
   A resource dictionary is a keyed dictionary of objects that can be used both in XAML and in code. XAML is the most common usage, particularly for initially defining the object resources in a resource dictionary. I have modified default style of DataPage and added TextBlock for displaying records number. I have used Expression Blend to modify DataPager style. It is very complex and lengthy to edit manually. These are few lines I have made changes in style.

   <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SampleDataPager.App"
    xmlns:test="clr-namespace:AdvancedDataPager;assembly=AdvancedDataPager"
    xmlns:Control="clr-namespace:AdvancedDataPager;assembly=AdvancedDataPager">
    <Application.Resources>
    <ResourceDictionary>
   .
   .
   <TextBlock x:Name="txtPage" Grid.Column="10" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5,0,5,0" Text="{Binding DisplayRecordsText, RelativeSource={RelativeSource TemplatedParent}}"/>
   .
   .
   </ResourceDictionary>
    </Application.Resources>
   </Application> 

    
4. Employee
   To test pagination in this post I created a class of type “Employee” to store Employee ID, Name, Department and Salary for each contact with sample data
   C#

   public class Employee
    {
    public int EmployeeID { get; set; }
    public string Name { get; set; }
    public string Department { get; set; }
    public double Salary { get; set; }
    }

5. DataGrid
   Displays data in a customizable grid. 
   

   <sdk:DataGrid Name="grdEmployees" Grid.Row="0" AutoGenerateColumns="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" /> 

Implementation  

• Add reference of AdvancedDataPager.dll from following location
  ..\AdvancedDataPager\AdvancedDataPager\Bin\Debug.
• Drag DataPagerPlus from your toolbox to Page.xaml as per following.   
• Add following code in MainPage.xaml
  

  <UserControl x:Class="SampleDataPager.MainPage"
   xmlns:Control="clr-namespace:AdvancedDataPager;assembly=AdvancedDataPager"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
   mc:Ignorable="d"
   d:DesignHeight="400" d:DesignWidth="500">

  <Grid x:Name="LayoutRoot" Background="White" Width="500" Height="400">
   <Grid.RowDefinitions>
   <RowDefinition></RowDefinition>
   <RowDefinition></RowDefinition>
   </Grid.RowDefinitions>
   <sdk:DataGrid Name="grdEmployees" Grid.Row="0" AutoGenerateColumns="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
   <Control:DataPagerPlus Name="pagerEmployees" Grid.Row="1" PageSize="5" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
   </Grid>
  </UserControl> 

• Add following code in MainPage.xaml.cs for binding data to DataGrid and assign it’s ItemSource to DataPagerPlus. 
  C#

  PagedCollectionView employees = new PagedCollectionView(Employees.Load());
   grdEmployees.ItemsSource = employees;
   pagerEmployees.Source = grdEmployees.ItemsSource;
  Employees.Load() function will return list of employees
  public class Employees : ObservableCollection<Employee>
   {
   public static ObservableCollection<Employee> Load()
   {
   ObservableCollection<Employee> objColEmp = new ObservableCollection<Employee>();
   objColEmp.Add(new Employee { EmployeeID = 1001, Name = "Imdadhusen Sunasara", Department = ".Net", Salary = 15000 });
   objColEmp.Add(new Employee { EmployeeID = 1002, Name = "Manoj Savalia", Department = ".Net", Salary = 11000 });
   objColEmp.Add(new Employee { EmployeeID = 1003, Name = "Ravi Patel", Department = "Java", Salary = 9000 });
   objColEmp.Add(new Employee { EmployeeID = 1004, Name = "Vasim Saiyad", Department = "Java", Salary = 8000 });
   objColEmp.Add(new Employee { EmployeeID = 1005, Name = "Jaypal Chawda", Department = "QA", Salary = 11000 });
   objColEmp.Add(new Employee { EmployeeID = 1006, Name = "Ashish Rawal", Department = ".Net", Salary = 1000 });
   objColEmp.Add(new Employee { EmployeeID = 1007, Name = "Hasan Sunasara", Department = "Java", Salary = 18000 });
   objColEmp.Add(new Employee { EmployeeID = 1008, Name = "Ambicaprasad Maurya", Department = ".Net", Salary = 12000 });
   objColEmp.Add(new Employee { EmployeeID = 1009, Name = "Sagar Rawal", Department = "Flex", Salary = 7000 });
   objColEmp.Add(new Employee { EmployeeID = 1010, Name = "Harsh Contractor", Department = ".Net", Salary = 8000 });
   objColEmp.Add(new Employee { EmployeeID = 1011, Name = "Jigar Pandya", Department = "Android", Salary = 12000 });
   objColEmp.Add(new Employee { EmployeeID = 1012, Name = "Rakesh Jogani", Department = "Flex", Salary = 7000 });
   return objColEmp;
   }
   }

• Modify Application.Resources in App.xaml for displaying Record Number

  <Application.Resources>
   <ResourceDictionary>
   <Style TargetType="Control:DataPagerPlus" >
  .
  .
  .
  .
  <TextBlock Grid.Column="10" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5,0,5,0" Text="{Binding DisplayRecordsText, RelativeSource={RelativeSource TemplatedParent}}"/>
   </Grid>
   </Border>
   </Grid>
   </ControlTemplate>
   </Setter.Value>
   </Setter>
   </Style>
   </ResourceDictionary>
   </Application.Resources> 

   

Component Logic 

• Extending DataPager
  C#

  public class DataPagerPlus : DataPager

• Create Dependency Property for displaying record number. (As per MSDN “dependency properties is to provide a way to compute the value of a property based on the value of other inputs. These other inputs might include system properties such as themes and user preference, just-in-time property determination mechanisms such as data binding and animations/storyboards, multiple-use templates such as resources and styles, or values known through parent-child relationships with other elements in the element tree. In addition, a dependency property can be implemented to provide self-contained validation, default values, callbacks that monitor changes to other properties, and a system that can coerce property values based on potentially runtime information “
• Register PageIndexChanged events on control load event to update displaying page number text. 
  C#

  this.PageIndexChanged += new EventHandler(CustomPager_PageIndexChanged);

• call function for displaying text on DataPagerPlus when page index is changed.
  C#

  private void CustomPager_PageIndexChanged(object sender, EventArgs e)
          {
              SetDisplayRecordsText(sender);
          }

• Actual code for displaying text.
  C#

  private void SetDisplayRecordsText(object sender)
          {
              int RecordCount = (base.ItemCount == 0) ? ((PagedCollectionView)((DataPager)(sender)).Source).ItemCount : base.ItemCount;
              int PageSize = base.PageSize;
              int PageIndex = (base.PageIndex + 1);
   
              int currentEndRow = (PageIndex * PageSize);
              if (currentEndRow > RecordCount) currentEndRow = RecordCount;
   
              if (currentEndRow < PageSize) PageSize = currentEndRow;
  int currentStartRow = (RecordCount > 0) ? (currentEndRow - PageSize) + 1 : 0;
   
              int TotalRecordsOnPage = (PageIndex * PageSize) - RecordCount;
              currentStartRow = (TotalRecordsOnPage == 1) ? currentEndRow : ((PageIndex - 1) * PageSize) + 1;
              this.DisplayRecordsText = string.Format("Displaying record(s) {0:0}-{1:0} of {2:0}", currentStartRow, currentEndRow, RecordCount);
          } 

  Your Thoughts

  If you find some issues or bugs with it, just leave a comment or drop me an email. If you make any notes on this, let me know that too so I don't have to redo any of your hard work. Please provide a "Vote" if this would be helpful.