Create an ASP.NET GridView Paging Style programmatically

Tweet

Some time back on dotnetcurry.com, I had posted an article about Some Tips and Tricks while Using ASP.NET GridView Paging. Most of the tips shown were done using CSS + code.

However, if you have a requirement to create a GridView paging style programmatically, then use the OnRowDataBound event of the GridView as shown below:

C#

protected void GridView1_RowDataBound(object sender, 

GridViewRowEventArgs e)

{

  if (e.Row.RowType == DataControlRowType.Pager)

  {

      TableRow tRow = e.Row.Controls[0].Controls[0].

        Controls[0] as TableRow;

      foreach (TableCell tCell in tRow.Cells)

      {

          Control ctrl = tCell.Controls[0];               

          if (ctrl is LinkButton)

          {

              LinkButton lb = (LinkButton)ctrl;

              lb.Width = Unit.Pixel(15);

              lb.BackColor = System.Drawing.Color.DarkGray;

              lb.ForeColor = System.Drawing.Color.White;

              lb.Attributes.Add("onmouseover", 

                 "this.style.backgroundColor='#4f6b72';"); 

              lb.Attributes.Add("onmouseout", 

                "this.style.backgroundColor='darkgray';");

          }

      }

  }

}

VB.NET

Protected Sub GridView1_RowDataBound(ByVal sender As Object, _

                             ByVal e As GridViewRowEventArgs)

     If e.Row.RowType = DataControlRowType.Pager Then

         Dim tRow As TableRow = _

         TryCast(e.Row.Controls(0).Controls(0).Controls(0), _

                                              TableRow)

         For Each tCell As TableCell In tRow.Cells

             Dim ctrl As Control = tCell.Controls(0)

             If TypeOf ctrl Is LinkButton Then

                 Dim lb As LinkButton = CType(ctrl, LinkButton)

                 lb.Width = Unit.Pixel(15)

                 lb.BackColor = System.Drawing.Color.DarkGray

                 lb.ForeColor = System.Drawing.Color.White

                 lb.Attributes.Add("onmouseover", _

                    "this.style.backgroundColor='#4f6b72';")

                 lb.Attributes.Add("onmouseout", _

                    "this.style.backgroundColor='darkgray';")

             End If

         Next tCell

     End If

End Sub

I have set the mouseover and mouseout attributes in this example which changes the color when the user hovers over the pager. You could follow a similar technique or tweak the example to suit your requirement. I hope you get the idea.

The output would be similar to the one shown below:



Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.