aspxtreme Source Code Viewer

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>

<html>
<head>
<title>Using the Built-In Pager with Custom Navigation Controls</title>
<link rel="stylesheet" href="/aspxtreme/shared/netdemos.css">

<script language="C#" runat="server" src="fetchData_oledb.cs" />

<script language="C#" runat="server">
   void Page_Load ( Object src, EventArgs e ) {
      if ( !IsPostBack ) bindGrid ( );
      myGrid.PagerStyle.Visible = showPager.Checked;
   }

   void setPage ( Object src, DataGridPageChangedEventArgs e ) {
      // used by built-in pager.
      // sets CurrentPageIndex to the page the user clicked.
      myGrid.CurrentPageIndex = e.NewPageIndex;
      // fetch and rebind the data.
      bindGrid ( );
   }

   void setPageCustom ( Object src, CommandEventArgs e ) {
      // used by custom paging UI
      switch ( e.CommandName ) {
         case ( "first" ) :
            myGrid.CurrentPageIndex = 0;
            break;
         case ( "prev" ) :
            if ( myGrid.CurrentPageIndex > 0 )
               myGrid.CurrentPageIndex --;
            break;
         case ( "next" ) :
            if ( myGrid.CurrentPageIndex < ( myGrid.PageCount - 1 ) )
               myGrid.CurrentPageIndex ++;
            break;
         case ( "last" ) :
            myGrid.CurrentPageIndex= ( myGrid.PageCount - 1 );
            break;
      }
      bindGrid ( );
   }

   void bindGrid ( ) {
      string query = "SELECT * FROM products";
      myGrid.DataSource = fetchData ( query, "gear" );
      myGrid.DataBind ( );
   }

   void setCustomPager ( Object src, DataGridItemEventArgs e ) {
      if ( e.Item.ItemType == ListItemType.Header ) {
         TableCellCollection header = e.Item.Cells;

         // remove extra cells in header
         for ( int i = 0; i < 3; i++ )
            header.RemoveAt ( 0 );

         // set first header cell
         header [ 0 ].ColumnSpan = 2;
         header [ 0 ].Text = "Page " + ( myGrid.CurrentPageIndex + 1 ) + 
            " of " + myGrid.PageCount;

         // set second header cell
         header [ 1 ].ColumnSpan = 3;
         header [ 1 ].HorizontalAlign = HorizontalAlign.Right;

         header [ 1 ].Controls.AddAt ( 0, new Button ( ) );
         Button btnFirst = ( Button ) header [ 1 ].Controls [ 0 ];
         btnFirst.Text = "First";
         btnFirst.CommandName = "first";

         header [ 1 ].Controls.AddAt ( 1, new Button ( ) );
         Button btnPrev = ( Button ) header [ 1 ].Controls [ 1 ];
         btnPrev.Text = "Prev";
         btnPrev.CommandName = "prev";

         header [ 1 ].Controls.AddAt ( 2, new Button ( ) );
         Button btnNext = ( Button ) header [ 1 ].Controls [ 2 ];
         btnNext.Text = "Next";
         btnNext.CommandName = "next";

         header [ 1 ].Controls.AddAt ( 3, new Button ( ) );
         Button btnLast = ( Button ) header [ 1 ].Controls [ 3 ];
         btnLast.Text = "Last";
         btnLast.CommandName = "last";

         // set common button properties
         foreach ( Control c in header [ 1 ].Controls ) {
            ( ( Button ) c ).Font.Bold = true;
            ( ( Button ) c ).BackColor = System.Drawing.Color.DarkRed;
            ( ( Button ) c ).ForeColor = System.Drawing.Color.Khaki;
            ( ( Button ) c ).Command += new CommandEventHandler ( setPageCustom );
         }
      }
   }
</script>
</head>

<body>
<!-- #include virtual="~/shared/top.inc" -->

<div class="header"><h3>Using the Built-In Pager with Custom Navigation Controls</h3></div>

<hr size=1 width=90%>

<div align="center">
<form runat="server">

   <asp:datagrid id="myGrid" runat="server"
      width="92%" cellpadding=5 gridlines="horizontal"
      autogeneratecolumns=false
      allowpaging pagesize=3
      onItemCreated="setCustomPager"
      onPageIndexChanged="setPage">

      <headerstyle font-bold
         backcolor="steelblue"
         forecolor="snow" />

      <pagerstyle
         mode="numericpages"
         backcolor="slategray" forecolor="khaki"
         font-name="comic sans ms" font-bold
         horizontalalign="center" />

      <itemstyle font-size="8pt" 
         backcolor="ghostwhite"
         verticalalign="top" />

      <columns>
         <asp:templatecolumn>
            <itemtemplate>
               <asp:hyperlink runat="server" 
                  navigateurl='<%# Eval ( 
                     "ProductID", "details_gear.aspx?id={0}" ) %>'>
                  <img width=75 border=0 runat="server"
                     src='<%# Eval ( "ProductID",
                        "~/shared/images/gear/{0}.jpg" ) %>' 
                     alt='<%# ( ( DataRowView ) Container.DataItem ) [ "Model" ] %>' />
               </asp:hyperlink>
            </itemtemplate>
            <itemstyle backcolor="lightsteelblue" />
         </asp:templatecolumn>

         <asp:boundcolumn datafield="Brand" />
         <asp:boundcolumn datafield="Model" />
         <asp:boundcolumn datafield="Description" />
         <asp:boundcolumn datafield="Price"
            dataformatstring="{0:c}"
            itemstyle-horizontalalign="right" />
      </columns>

   </asp:datagrid>

   <p>

   <asp:checkbox id="showPager" runat="server"
      text="Show built-in pager" autopostback />

</form>
</div>

<!-- #include virtual="~/shared/viewsrc.inc" -->

</body>
</html>