Scroll To Top
Reader Level:

Paging Data in the Silverlight DataGrid

By Nipun Tomar on Jul 24, 2008
In this article I will discuss Paging in a Silverlight DataGrid.

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.


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()



            //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;



            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);


                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;




                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());



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