ARTICLE

Paging Data in the Silverlight DataGrid

Posted by Nipun Tomar Articles | Silverlight with C# July 24, 2008
In this article I will discuss Paging in a Silverlight DataGrid.
Reader Level:

Silverlight DataGrid does not have the built-in paging facility. So here is a small piece of code to implement paging in Silverlight DataGrid. For this custom paging

  • Calculate the number of pages based on total number of records and page size
  • Add those many buttons to a container like StackPanel and
  • On those buttons click events bind the DataGrid to desired range of records.

Demo

1. Define the following Properties and Variables
               
public partial class Page : UserControl

    {

        //Property to hold the value of total records

        public int TotalRow { get; set; }

        //Property to hold the value of page size

        public int PageSize { get; set; }

        //Number of rows that the DataGrid

        int totalRowsInGrid = 0;

2. Initialize the values
               
public Page()

        {

            InitializeComponent();

            //Initialize the page size

            PageSize = 10;

            //Get the desired data

            user = User.Get();

            //Set the TotalRow cout to the number of rows returned for data

            TotalRow = user.Count;

 

            BindGrid(1);

            DoPaging(this.PageSize, TotalRow);

        }

3. Create a method to get the desired range of data based on page number
/// <summary>

        /// Returns paged data based on page number

        /// </summary>

        /// <param name="pageNumber"></param>

        /// <returns></returns>

        private List<User> GetData(int pageNumber)

        {

            int Pagestart = (pageNumber - 1) * this.PageSize;

            TextBlockStartPageNumber.Text = (Pagestart+1).ToString();

            TextBlockEndPageNumber.Text = (Pagestart + totalRowsInGrid).ToString();

            TextBlockTotalRecords.Text = TotalRow.ToString();

            int i = TotalRow;

            List<User> PagedData;

            //List<User> PagedData = user.Skip((pageNumber - 1) * PageSize).Take(PageSize) as List<User>;

            //List<YourObject> PageedData = FullList.Skip((PageNumber - 1) * PageSize).Take(PageSize).ToList();

            if ((i - ((pageNumber - 1) * this.PageSize)) >= this.PageSize)

                PagedData = user.GetRange(Pagestart, this.PageSize);

            else

                PagedData = user.GetRange(Pagestart, (i % this.PageSize));

            return PagedData;

        }

4. Bind the DataGrid
/// <summary>

        /// Bind grid to the desired range of records

        /// </summary>

        /// <param name="PageNumber"></param>

        private void BindGrid(int PageNumber)

        {

            if (this.PageSize * PageNumber > this.TotalRow)

            {

                totalRowsInGrid = this.TotalRow % this.PageSize;

            }

            else

            {

                totalRowsInGrid = this.PageSize;

            }

            dataGridPaging.ItemsSource = GetData(PageNumber);

        }

5. Write the click event for the paging buttons
/// <summary>

        /// Handles the click event of buttons having page numbers

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        void btn_Click(object sender, RoutedEventArgs e)

        {

            Button btn = sender as Button;

            int iPageNumber = Convert.ToInt32(btn.Content.ToString());

            BindGrid(iPageNumber);

        }

That’s all you are done with the custom paging in Silverlight DataGrid.

COMMENT USING