Add Paging to a DataList - Part 2

Add Paging to a DataList - Part 2
Previous Page
The Data Access Layer can now be wired to a datalist.

1.  Build the project to generate the DAL objects and create a new form.
 
2.  Create the ObjectDataSource:
a. Select the aspx design view.

b. Drag and drop an
    ObjectDataSource onto a web
    form.  Select "Configure Data
    Source." 

c. On the "Choose a Business 
    Object" dialog select   
    SalesByCategoryTableAdapter
    and select  "Next".

Note, the DAL must be in the App_Code folder or it will not appear.

d. On "Define Data Methods",
    select
    GetSalesByCategoryWithPaging. 

e. Select "none" on the Update, 
    Insert, and Delete tabs.

f. Select "Next"

  
 
3.  Define the parameters:
a. Define "StartRowIndex" as a
    QueryString with a
    DefaultValue of 0. 

b. Define "maximumRows" as a
    QueryString with a
    DefaultValue of 20. This is the
    number of rows that will
    display on a page. Adjust this
    value to increase or decrease
    the # of rows per page.

c. Select "Finish"
 
2.  a. Name the ObjectDataSource
    odsSales.

b. Create an event for "Selected".
    This event will execute each
    time the page is displayed.
 
3.  Create the DataList by entering this code in the aspx source.  It references odsSales as the DataSourceId.
<asp:DataList ID="dlLinks"runat="server" DataSourceID="odsSales" RepeatColumns="2" 
  RepeatLayout="Table" RepeatDirection="Vertical">
<ItemTemplate>
<table>
  <tr>
    <td width="80px">
        <asp:Label ID="Label1" runat="server" Text='<%#Eval("categoryName") %>' />
    </td> 
    <td width="180px">
        <asp:Label ID="lblLinkName" runat="server" Text='<%#Eval("productName") %>' />
    </td>
    <td> 
        <asp:Label ID="lblLinkDescription"runat="server"Text='<%#Eval("TotalPurchase") %>' />
    </td>
    <td width="50px" />
  </tr>
</table>
</ItemTemplate>
</asp:DataList>
 
4.  Since paging is being manaully managed, create the paging controls.  This sample uses ImageButtons which are included in the sample source.
<table width=95%>
  <tr>
    <td width="33%" align="left">
        <asp:ImageButton ID="btnPrev" runat="server" ImageUrl="~/images/Back.jpg" /> 
    </td>
    <td valign="middle" align="center">
        <asp:Label ID="PagerLocation" runat="server" Font-Size="10px" Font-Names="Verdana"
         ForeColor="GrayText" />
    </td>
    <td width="33%" align="right">
        <asp:ImageButton ID="btnNext" runat="server" ImageUrl="~/images/Foward.jpg" />
    </td>
    <td width="50px" /> 
  </tr>
</table>
 
5.  odsSales_Selected manages the navigation buttons. 

UpdateNextPrevLinks defines the navigationUrl. Replace
DataListPaging.aspx with the name of the page. 
protected void odsSales_Selected(object sender, ObjectDataSourceStatusEventArgs e)
{
   int linksCount = (int)e.OutputParameters["SalesCategoryCnt"];
   int pageIndex = Convert.ToInt32(Request.QueryString["startRowIndex"]);
   int pageSize = Int32.Parse(odsSales.SelectParameters["maximumRows"].DefaultValue); 
   UpdatePagerLocation(pageIndex, pageSize, linksCount);
   UpdateNextPrevLinks(pageIndex, pageSize, linksCount);
}

protected void UpdatePagerLocation(int pageIndex, int pageSize, int linksCount)
{
   int currentStartRow = (pageIndex * pageSize) + 1;
   int currentEndRow = (pageIndex * pageSize) + pageSize;
   if (currentEndRow > linksCount)
       currentEndRow = linksCount;
    PagerLocation.Text = currentStartRow + " thru " + currentEndRow + " of "
       + linksCount + " Products";
}

protected void UpdateNextPrevLinks(int pageIndex, int pageSize, int linksCount)
{ 
    string navigationUrl = "DataListPaging.aspx?startRowIndex={0}";
    this.btnPrev.PostBackUrl = String.Format(navigationUrl, pageIndex - 1);
    this.btnPrev.Visible = (pageIndex > 0) ? true : false;
    this.btnNext.PostBackUrl = String.Format(navigationUrl, pageIndex + 1);
    this.btnNext.Visible = (pageIndex + 1) * pageSize < linksCount ? true : false;
}
 
6.  You are done!  Run the app and the datalist will display with paging.
 
Previous Page
 Contact Us     Links      ©2010 GeekPhilosopher.com - All rights reserved
Powered by www.ezjooz.com