DataPager Elements| KT.UI for ASP.NET AJAX

DataPager Elements in ASP.NET

Home > How to > DataPager Elements

ASP.NET PerDataPager Field Overview

KT.UI for ASP.NET PerDataPager control offers a number of fields that can be used for creating and specifying particular web pager. By using our DataPager component, users are capable of choosing the controls that will appear in the pager field to help you navigate through the pages.

Within web PerDataPager built-in ASP.NET fields, there are four filed types used for displaying different interface: PerDataPagerButtonField, PerDataPagerPageSizeField, PerDataPagerGoToPageField and PerDataPagerTemplatePageField. Users are allowed to use one or more pager field objects in a single PerDataPager control.

This tutorial starts with these four corresponding field types:

How to set PerDataPagerButtonField by using demo ASP.NET codes
How to specify PerDataPagerPageSizeField with online sample ASP.NET methods
How to define PerDataPagerGoToPageField by using given sample codes within ASP.NET application
How to customize PerDataPagerTemplatePageField with KT.UI PerDataPager control

How to Set PerDataPagerButtonField

When PerDataPager contains a PerDataPagerButtonField, users are enabled to add arrow buttons for navigation to First, FirstPrev, Last, Next, NextLast, Numeric, Prev, PrevNext page, link buttons.

See following sample ASPX codes and demo image to set your own particular PerDataPagerButtonField.


<kettic:PerDataPager ID="PerDataPager1" runat="server" PagedControlID="PerListView1"
PageSize="6">
<Fields>
<kettic:PerDataPagerButtonField FieldType="FirstPrev"></kettic:PerDataPagerButtonField>
<kettic:PerDataPagerButtonField FieldType="Numeric"></kettic:PerDataPagerButtonField>
<kettic:PerDataPagerButtonField FieldType="NextLast"></kettic:PerDataPagerButtonField>
</Fields>
</kettic:PerDataPager>

/how-to/aspnet-ajax/controls-data-pager/controls-data-pager-elements1.jpg

PerDataPagerPageSizeField

When PerDataPager contains a PerDataPagerPageSizeField, it can display a drop down control for changing the current page size. PerDataPager shows the PageSizeControlType property on the field which is the default type of PagerDropDownControlType. And there are three available values that can be seamlessly combined with PerComboBox being the default one: None, PerComboBox and PerDropDownList.

Please refer to ASP.NET demo codes below to program your own specified PerDataPagerPageSizeField within web ASP.NET project.


<kettic:PerDataPager ID="PerDataPager1" runat="server" PagedControlID="PerListView1">
<Fields>
<kettic:PerDataPagerPageSizeField PageSizeText="Page size: "></kettic:PerDataPagerPageSizeField>
                                                
</Fields>
</kettic:PerDataPager>

Sample image for demonstrating above settings.

/how-to/aspnet-ajax/controls-data-pager/controls-data-pager-elements2.jpg

PerDataPagerGoToPageField

When PerDataPager is displayed as PerDataPagerGoToPageField, PerNumericTextBox and a button for navigating to particular page number occur. With PerNumericTextBox control, users can type the desired page number and jump to this page on button click directly.

Please use following ASPX codes for setting PerDataPagerGoToPageField.


<kettic:PerDataPager ID="PerDataPager1" runat="server" PagedControlID="PerListView1" >
<Fields>
<kettic:PerDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go" TextBoxWidth="30">
</kettic:PerDataPagerGoToPageField>
                                           
</Fields>
</kettic:PerDataPager>

/how-to/aspnet-ajax/controls-data-pager/controls-data-pager-elements3.jpg

PerDataPagerTemplatePageField

When PerDataPager has PerDataPagerTemplatePageField property, users are allowed to set the appearance and features of the pager field.

The PerDataPagerTemplatePageField offers users a set of customizations to the paging interface. It uses code block to retrieve the total number of rows, the starting row number, and the overall page size to perform calculations.

Snippet of ASP.NET codes below can be directly copy and paste to customize PerDataPagerTemplatePageField.


<kettic:PerDataPager ID="PerDataPager1" runat="server" PagedControlID="PerListView1">
 <Fields>
    
     <kettic:PerDataPagerTemplatePageField>
         <PagerTemplate>
             <div style="float: right">
                 Items
                 <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>"></asp:Label>
                 to
                 <asp:Label runat="server" ID="TotalPagesLabel" Text="&lt;%# Container.Owner.TotalRowCount > 
         (Container.Owner.StartRowIndex+Container.Owner.PageSize) ? Container.Owner.StartRowIndex+Container.Owner.PageSize : Container.Owner.TotalRowCount %>"></asp:Label>
                 of
                 <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>"></asp:Label>
                 <br/>
             </div>
         </PagerTemplate>
     </kettic:PerDataPagerTemplatePageField>
 </Fields>
</kettic:PerDataPager>

Sample screenshot for above settings.

/how-to/aspnet-ajax/controls-data-pager/controls-data-pager-elements4.jpg

ASP.NET AJAX UI Controls