Creating Custom Paging for Datalist control

I have seen many articles for DataList custom paging, everyone showing paging in the DataList when the image is coming from a database. My requirement was for paging in a DataList when the image is coming from a folder.

 

This article demonstrates how to create custom paging for DataList control when the image is coming from a folder.

 

Step 1:

 

Design a Form; drag a DataList Control from the toolbox. Set the Repeated Column property and design the DataList control as you require. Add link buttons for next, prev, first and last images.

<asp:DataList ID="DataList1" runat="server" RepeatColumns="4" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black" Width="100% onselectedindexchanged=" DataList1_SelectedIndexChanged">
  <FooterStyle BackColor="#CCCCCC" />
  <SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
  <HeaderTemplate>
    <span class="style2">Image Gallary</span>
  </HeaderTemplate>
  <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
  <ItemTemplate>
    <asp:ImageButton Width="105px" ID="Image1" runat="server" BorderStyle="Solid" ImageUrl='<%# Bind("Name", "~/[foldername]/{0}") %>' CommandName="Image" CommandArgument='<%# Bind("Name") %>' Height="94px" />
    <br />
    <asp:Label ID="lblImg" Text='<%# Bind("Name") %>' runat="server" Visible="false" />
    <br />
  </ItemTemplate>
  <FooterStyle BackColor="White" ForeColor="#333333" />
  <ItemStyle BorderColor="Silver" BorderStyle="Dotted" BorderWidth="1px" HorizontalAlign="Center" VerticalAlign="Bottom" BackColor="White" ForeColor="#333333" />
</asp:DataList>
<asp:LinkButton ID="btnNext" runat="server" CausesValidation="False" onclick="btnNext_Click">Next ></asp:LinkButton>
  <asp:LinkButton ID="btnFirst" runat="server" CausesValidation="False" onclick="btnFirst_Click"><< First
</asp:LinkButton>
 <asp:LinkButton ID="btnPrev" runat="server" CausesValidation="False" onclick="btnPrev_Click"><
  Prev</asp:LinkButton>
  <asp:LinkButton ID="btnLast" runat="server" CausesValidation="False" onclick="btnLast_Click">Last
  >></asp:LinkButton>

Step 2:

 

Write the following code...

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.IO;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class Gallary: System.Web.UI.Page {
    int cnt; //count the total records
    int cntitem = 0; //for counting item in list
    decimal last1; // access the last record
    PagedDataSource pagedData = new PagedDataSource();
    protected void Page_Load(object sender, EventArgs e) {
      if (!IsPostBack) {

        BindImage();

      }
    }

    private ArrayList ListImages() {
      cntitem = 0;

      DirectoryInfo dir = new DirectoryInfo(MapPath("~/ThumbnailImage"));
      FileInfo[] file = dir.GetFiles();
      ArrayList list = new ArrayList();
      foreach(FileInfo file2 in file) {
        if (file2.Extension == ".jpg" || file2.Extension == ".jpeg" || file2.Extension == ".gif" || file2.Extension == ".png") {
          list.Add(file2);
          cntitem++;
        }
      }
      Session["cnt"] = cntitem;
      return list;
    }

    private void doPaging() {

      // set the RepeatColumn property 2 of the Datalist control
      pagedData.DataSource = ListImages(); //will fetch the records from getTheData() method
      //and store in pagedDataSource
      pagedData.AllowPaging = true;

      pagedData.PageSize = 8;
      //will display the 2 records at time in row and coulmn wise
      cnt = Convert.ToInt32(Session["cnt"]);
      //total record or you can use here viewstate
      last1 = cnt / pagedData.PageSize;
      last1 = Convert.ToDecimal(Math.Ceiling(last1));
      // to find the last record will change 9/2=4.5 into 5

      try {
        pagedData.CurrentPageIndex = Int32.Parse(Request.QueryString["Page"].ToString());
      } catch (Exception ex) {
        pagedData.CurrentPageIndex = 0;
      }
      //place four buttons and name btnprev,btnfirst,last and btnnext
      btnPrev.Visible = (!pagedData.IsFirstPage);
      btnFirst.Visible = (!pagedData.IsFirstPage);

      btnNext.Visible = (!pagedData.IsLastPage);
      btnLast.Visible = (!pagedData.IsLastPage);

      DataList1.DataSource = pagedData;
      DataList1.DataBind();

    }

    protected void btnNext_Click(object sender, EventArgs e) {
      doPaging(); // will call the dopaging method
      Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (pagedData.CurrentPageIndex + 1).ToString());

    }
    protected void btnFirst_Click(object sender, EventArgs e) {
      doPaging();
      Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (pagedData.CurrentPageIndex == 1).ToString());
    }
    protected void btnPrev_Click(object sender, EventArgs e) {
      doPaging();
      Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (pagedData.CurrentPageIndex - 1).ToString());

    }
    protected void btnLast_Click(object sender, EventArgs e) {
      doPaging();
      Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (last1 - 1).ToString());
    }
    protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e) {
      DataList1.EditItemIndex = -1;
      doPaging();

    }
    void BindImage() {
      DataList1.DataSource = ListImages();
      DataList1.DataBind();
      doPaging();
    }

Step 3: Run your website………………….