Click here to Skip to main content
Click here to Skip to main content

DataPager with Displaying Record Number - Silverlight

, 10 May 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
DataPagerPlus allows user to displaying Navigation Button (right), Page Number (center), Total Records (left) on Pager

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
    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. 
    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
    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. 
    this.PageIndexChanged += new EventHandler(CustomPager_PageIndexChanged);
  • call function for displaying text on DataPagerPlus when page index is changed.
    private void CustomPager_PageIndexChanged(object sender, EventArgs e)
            {
                SetDisplayRecordsText(sender);
            }
  • Actual code for displaying text.
    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.  

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sunasara Imdadhusen
Software Developer (Senior) Infostretch Ahmedabad-Gujarat
India India
Aspiring for a challenging carrier wherein I can learn, grow, expand and share my existing knowledge in meaningful and coherent way.

sunaSaRa Imdadhusen
 
AWARDS:
  1. 1st Best Asp.Net article of SEP 2010
  2. 2nd Best Asp.Net article of MAY 2011
 
Read More Articles...
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
BugNot supporting for Support for Silverlight 5 Pinmembersimhachalam maradana4-Jun-13 20:07 
GeneralRe: Not supporting for Support for Silverlight 5 PinprofessionalSunasara Imdadhusen4-Jun-13 20:13 
GeneralRe: Not supporting for Support for Silverlight 5 Pinmembersimhachalam maradana4-Jun-13 20:20 
GeneralSimple and effective. PinmemberSavalia_Manoj21-Jun-12 0:29 
GeneralRe: Simple and effective. PinprofessionalSunasara Imdadhusen19-May-13 19:50 
GeneralMy vote of 5 PinmemberSavalia_Manoj21-Jun-12 0:28 
GeneralRe: My vote of 5 PinprofessionalSunasara Imdadhusen19-May-13 19:50 
GeneralMy vote of 5 PinmemberSavalia_Manoj21-Jun-12 0:22 
GeneralRe: My vote of 5 PinprofessionalSunasara Imdadhusen22-Apr-14 2:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.141022.2 | Last Updated 10 May 2012
Article Copyright 2012 by Sunasara Imdadhusen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid