OVERVIEW

A nice thing which I like about the Wijmo controls is that they are designed not only to be used as an individual control. This provides developers, flexibility to use the Wijmo controls with other controls as per their requirements. Having said that, let us now concentrate on the C1Pager control which is the main element of this blog. As we all know, The C1Pager enables end-users to scan through elements or pages by clicking on a visible element. Those who have been working with Wijmo controls would certainly have seen this control being used with the C1GridView. However in this blog article we will use the standard ASP.NET DataList control and learn how we can implement paging in it using C1Pager. Just to clarify, the DataList control is like the Repeater control, used to display a repeated list of items that are bound to the control. Here is a quick look of what we will end up creating:

IMPLEMENTATION

The first thing we need is to set up a datasource for the DataList. In this example we are creating a DataSet using an OleDb datasource. An important thing to note in this implementation is that once the dataset is created, we will assign it to a PagedDataSource. This is required to assign a fixed number of records for each page. Here is how we will set this up:

OleDbDataAdapter dadapter;  
DataSet dset;  
PagedDataSource adsource;  
string connstring = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.Web.HttpContext.Current.Server.MapPath("~/App_Data/NWIND.mdb") + ";Persist Security Info=False";  
int pos;  
int pageCount = 0;  

protected void Page_Load(object sender, EventArgs e)  
{  
   if (!IsPostBack)  
   {  
      this.ViewState["vs"] = 0;  
   }  
   pos = (int)this.ViewState["vs"];  
   DataBind();  
   C1Pager1.PageCount = pageCount;  
   C1Pager1.Mode = C1.Web.Wijmo.Controls.C1Pager.PagerMode.Numeric;  
}

And this is how the DataBind function looks like:

public void DataBind()  
{  
   dadapter = new OleDbDataAdapter("SELECT TOP 20 CompanyName, City, Country FROM Customers", connstring);  
   dset = new DataSet();  
   adsource = new PagedDataSource();  
   dadapter.Fill(dset);  
   adsource.DataSource = dset.Tables[0].DefaultView;  
   adsource.PageSize = 5;  
   adsource.AllowPaging = true;  
   adsource.CurrentPageIndex = pos;  
   DataList1.DataSource = adsource;  
   DataList1.DataBind();  
   pageCount = Convert.ToInt32(dset.Tables[0].Rows.Count / adsource.PageSize);  
}

Now everything is set up except for the handling of page change in the C1Pager. To do this, we will use the PageIndexChanged event of the C1Pager. This is how the code should look like:

protected void C1Pager1_PageIndexChanged(object sender, EventArgs e)  
{  
   int currPage = C1Pager1.PageIndex;  
   pos = (int)this.ViewState["vs"];  
   pos += currPage;  
   this.ViewState["vs"] = pos;  
   DataBind();  
   pos = 0;  
   this.ViewState["vs"] = 0;  
}

So everything is set up and we are good to go. Everytime we select a different page on the pager, the related set of records will be fetched using the PagedDataSource and will be displayed on the DataList. A sample application showcasing this implementation can be downloaded from the links below. Download C# Sample Download VB.NET Sample