Kentico CMS 7.0 Controls

Getting started

Getting started

Previous topic Next topic Mail us feedback on this topic!  

Getting started

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

The following is a step-by-step tutorial that will show you how to add a custom pager to a CMSRepeater control that displays Smartphones (CMS.Smartphone documents) using the TemplateDataPager control:

 

1. Create a new Web form somewhere in your website installation directory.

 

2. Now add the following code to the page, inside the <form> element:

 

<ajaxToolkit:ToolkitScriptManager ID="manScript" runat="server" EnableViewState="false" />

<table style="border: solid 1px #CCCCCC; margin-left: auto; margin-right: auto;">

<tr>

  <td style="border-bottom: solid 1px #CCCCCC; padding: 10px; text-align: center;">

      <cms:CMSRepeater ID="CMSRepeater1" runat="server" Path="/%" ClassNames="CMS.Smartphone"

      TransformationName="Ecommerce.Transformations.Product_Default">

      </cms:CMSRepeater>

  </td>

</tr>

<tr>

  <td style="padding: 10px; background-color: #D9D9D9;">

  <cms:TemplateDataPager ID="TemplateDataPager1" runat="server">

      <NumberTemplate>

          <a href="?Page=<%# Eval("PageNumber") %>">

                  <%# Eval("PageNumber") %>

          </a>

      </NumberTemplate>

      <SelectedNumberTemplate>

          <b>

              <%# Eval("PageNumber") %>

          </b>

      </SelectedNumberTemplate>

      <SeparatorTemplate>

           -

      </SeparatorTemplate>

      <FirstItemTemplate>

          <a href="?Page=1">First</a>&nbsp;|&nbsp;

      </FirstItemTemplate>

      <LastItemTemplate>

          &nbsp;|&nbsp;<a href="?Page=<%# pageCount %>">Last</a>

      </LastItemTemplate>

      <PreviousItemTemplate>

          <a href="?Page=<%# previousPage %>">Previous</a> &nbsp;|&nbsp;

      </PreviousItemTemplate>

      <NextItemTemplate>

          &nbsp;|&nbsp; <a href="?Page=<%# nextPage %>">Next</a>

      </NextItemTemplate>

  </cms:TemplateDataPager>

  </td>

</tr>

</table>

 

As you can see, the control uses a standard CMSRepeater control to display data. The pager format is specified using the templates defined between the tags of the <cms: TemplateDataPager> element.

 

The ToolkitScriptManager control included at the top is required by the transformation used to display smartphone documents. It is only there to ensure that the example is functional by itself and will usually be included on your website's master page.

 

3. Modify the code-behind so that it looks like this (the class name and type may be different):

 

[C#]

 

using CMS.GlobalHelper;

 

public partial class CMSControlsExamples_TemplateDataPager : System.Web.UI.Page

{

  public string pageCount = "1";

  public string previousPage = "1";

  public string nextPage = "";

 

 

  /// <summary>

  /// OnInit override

  /// </summary>

  /// <param name="e"></param>

  protected override void OnInit(EventArgs e)

   {

      // Disable repeater pager and databindbydefault

       CMSRepeater1.EnablePaging = false;

       CMSRepeater1.DataBindByDefault = false;

 

      base.OnInit(e);

   }

 

 

  protected void Page_Load(object sender, EventArgs e)

   {

      // Get repeater datasource

       TemplateDataPager1.DataSource = CMSRepeater1.DataSource;

     

      // Set page size

       TemplateDataPager1.PageSize = 1;

 

      // Set current page from query string

       TemplateDataPager1.CurrentPage = ValidationHelper.GetInteger(Request.QueryString["Page"], 1);

     

      // Get page number for last link

       pageCount = ((int)(TemplateDataPager1.PageCount - 1)).ToString();

 

      // Set default next page link

       nextPage = pageCount;

 

      // Set previous link

      if ((TemplateDataPager1.CurrentPage - 1) >= 1)

       {

           previousPage = ((int)(TemplateDataPager1.CurrentPage - 1)).ToString();

       }

 

      // Set next link

      if ((TemplateDataPager1.CurrentPage + 1) <= (TemplateDataPager1.PageCount - 1))

       {

           nextPage = ((int)(TemplateDataPager1.CurrentPage + 1)).ToString();

       }

 

      // Set paged datasource to the repeater and databind it

       CMSRepeater1.DataSource = TemplateDataPager1.PagedData;

      if (!DataHelper.DataSourceIsEmpty(CMSRepeater1.DataSource))

       {

           CMSRepeater1.DataBind();

       }

   }

}

 

This code binds the TemplateDataPager to the CMSRepeater.

 

4. Save the changes to the web form. Now right-click it in the Solution explorer and select View in Browser. The resulting page should look like this:
 
controls_clip0027