This topic illustrates how to create a paged table using Design View, Source View, and Code. For this project, you will combine a C1Pager control with a general ASP.NET Grid control. This Task-Based Help uses the Northwind database that is installed with the product in the Documents\ComponentOne Samples\Common folder.

Complete the following steps:

1. In the Solution Explorer window, right-click the App_Data folder and select Add Existing Item in the context menu.
2. In the Add Existing Item dialog box, navigate to where the Northwind database is located, by default in the samples directory, select C1Nwind.mdb, and click Add to close the dialog box and add the file to your project.
3. In the Design View, add a C1Pager control to your project.
4. Set the C1Pager Property PageCount to "1".
5. Switch to the Source View and add the following markup in the second set of <asp:Content> tags to set the properties of both the Grid control and the C1Pager control.

   <asp:ScriptManager runat="server" ID="ScriptManger1"></asp:ScriptManager>
      
       <asp:UpdatePanel runat="server" ID="UpdatePanel1">
           <ContentTemplate>
               <cc1:C1Pager runat="server" ID="C1Pager1" AutoPostBack="true" Mode="NumericFirstLast"
                   OnPageIndexChanged="C1Pager1_PageIndexChanged" />
    
       <asp:GridView Width="100%" runat="server" ID="GridView1"
                   DataSourceID="AccessDataSource1" AllowPaging="True"
                  CssClass="ui-widget" ondatabound="GridView1_DataBound">
                  <HeaderStyle CssClass="ui-widget-header" />
                  <RowStyle CssClass="ui-widget-content" />
                  <PagerSettings Visible="false" />
              </asp:GridView>
           </ContentTemplate>
       </asp:UpdatePanel>
   

6. Use the following markup to set the Data Source and the content of the grid.

   <asp:AccessDataSource ID="AccessDataSource1" runat="server"
             DataFile="~/App_Data/C1NWind.mdb"
             SelectCommand="SELECT [OrderID], [ProductID], [UnitPrice], [Quantity] FROM [Order Details]">
      </asp:AccessDataSource>
   

7. Navigate to the Default.aspx.cs file and insert the following code to bind the C1Pager control to the grid.

   protected void C1Pager1_PageIndexChanged(object sender, EventArgs e)
           {
               GridView1.PageIndex = C1Pager1.PageIndex;
               GridView1.DataBind();
           }
    
           protected void GridView1_DataBound(object sender, EventArgs e)
           {
               C1Pager1.PageCount = GridView1.PageCount;
           }
       }
   }
   

8.  Press F5 to run your program. Your paged table should resemble the following image.

   

This topic illustrates the following:

At run time, you will have a populated table that is controlled by a C1Pager element.