Tuesday, July 21, 2015

c#: Datagridview with Page number

I was tired of displaying a record in a grid view with only has a Next and Previous button on it, co'z I feel like I am only limited in those button, so I decided to make a something like "Paging".

First, we have to specify the design. Add a datagridview and seven Buttons on the form.
And change each button to the following names

"Button1" will be change to "btnPrevious"
"Button2" will be change to "btnOne"
"Button3" will be change to "btnTwo"
"Button4" will be change to "btnThree"
"Button5" will be change to "btnFour"
"Button6" will be change to "btnFive"
"Button7" will be change to "btnNext"

The UI should somehow look  like this.

Double click the form and declare this code inside the form class.

 int totalRecord;
        int rowToDisplay = 10;

        DataTable DataStorage = new DataTable();

       

On the form load, add some sample data on the declared datatable and get the total count of records created.

private void Form1_Load(object sender, EventArgs e)
{
            // Create a column for DataStorage
            DataStorage.Columns.Add("Col1", typeof(string));
            DataStorage.Columns.Add("Col2", typeof(string));
            DataStorage.Columns.Add("Col3", typeof(string));
            DataStorage.Columns.Add("Col4", typeof(string));

            for (int i = 0; i <= 5554; i++)
            {
                // add a record
                DataStorage.Rows.Add(i, "A" + i, "B" + i, "C" + i);
            }

            totalRecord = DataStorage.Rows.Count;

            BindTheResult(0);

}


Create a method that will display the result in datagridview. In this method, it will calculate the start index on which the created datatable will be sought.

private void BindTheResult(int startFrom)
        {

            var start = (startFrom * rowToDisplay);// identify index to start

            DataStorage.DefaultView.RowFilter = string.Format("Col1>= {0} AND Col1<={1}", start, rowToDisplay + start);
            dataGridView1.DataSource = DataStorage.DefaultView;

            PreparePaging(startFrom);
        }


The method below will handle the buttons display and some events. This method will also compute for the total page according to the given number of rows to display.

private void PreparePaging(int startFrom)
        {

            var totalPage = 0;

            if ((totalRecord % rowToDisplay) > 0)
                totalPage = (totalRecord / rowToDisplay) + 1;
            else
                totalPage = (totalRecord / rowToDisplay);
            
            var x = 1;
            var y = 0;

            for (y = 1; y <= totalPage; y += 5)// step 5= where 5 represents the button one to five on the UI.
            {
                if (startFrom + 1 >= y && startFrom + 1 <= y + 4)
                    break;
            }

            startFrom = y;
            
            // make sure to clear the text and disable the button
            btnPrevious.Enabled = startFrom > 1;
            btnOne.Enabled = false;
            btnTwo.Enabled = false;
            btnThree.Enabled = false;
            btnFour.Enabled = false;
            btnFive.Enabled = false;
            btnNext.Enabled = false;

            btnOne.Text = string.Empty;
            btnTwo.Text = string.Empty;
            btnThree.Text = string.Empty;
            btnFour.Text = string.Empty;
            btnFive.Text = string.Empty;

            if (y > 1)
            {
                btnPrevious.Enabled = true;
                btnPrevious.Tag = y - 5;
            }

            for (int i = startFrom; i <= totalPage; i++)
            {
                if (x > 5)
                {
                    btnNext.Enabled = true;
                    btnNext.Tag = i.ToString();
                    break;
                }
                else
                {
                    if (x == 1)
                    {
                        btnOne.Tag = i.ToString();
                        btnOne.Text = i.ToString();
                        btnOne.Enabled = true;
                    }
                    if (x == 2)
                    {
                        btnTwo.Tag = i.ToString();
                        btnTwo.Text = i.ToString();
                        btnTwo.Enabled = true;
                    }
                    if (x == 3)
                    {
                        btnThree.Tag = i.ToString();
                        btnThree.Text = i.ToString();
                        btnThree.Enabled = true;
                    }
                    if (x == 4)
                    {
                        btnFour.Tag = i.ToString();
                        btnFour.Text = i.ToString();
                        btnFour.Enabled = true;
                    }
                    if (x == 5)
                    {
                        btnFive.Tag = i.ToString();
                        btnFive.Text = i.ToString();
                        btnFive.Enabled = true;
                    }
                }

                x += 1;
            }

        }


        

Once everything is completed, its time to handle each buttons events. Note that button one - five events are handled in BtnOne_Click method.

private void btnPrevious_Click(object sender, EventArgs e)
        {
            var start = btnPrevious.Tag.ToString() == "1" ? 0 : Convert.ToInt32(btnPrevious.Tag) - 1;
            BindTheResult(Convert.ToInt32(start));
        }

        private void btnOne_Click(object sender, EventArgs e)
        {
            var btn = (Button)sender;

            BindTheResult(Convert.ToInt32(btn.Tag) - 1);
        }

        private void btnNext_Click(object sender, EventArgs e)
        {
            BindTheResult(Convert.ToInt32(btnNext.Tag) - 1);
            btnPrevious.Enabled = true;
        }


 


If there are some bugs or errors found, kindly comment below.

No comments:

Post a Comment