ListView Paging|KT.UI for ASP.NET AJAX

ListView Paging in ASP.NET

Home > How to > ListView Paging

In this guiding page, we will introduce to you the paging feature for your listview control. ListView library component is a powerful and professional UI control designed for web developers to use in ASP.NET AJAX developing environment. It provides flexible paging functionalities to help you create a listview with intuitive interface.

In the following sections, detailed explanations will be provided for some of the most crucial properties related to listview paging in your ASP.NET AJAX application, such as AllowPaging, PageSize, and CommandArgument, which specifies how to turn to first / last / previous or next page, just to name a few here.

In addition, using this paging feature, users can easily view large sum of data page by page, so you can enjoy better viewing experience as well as improved loading speed and better navigation.

Apart from this listview paging guide, Kettic also provides you with some other related tutorials for your listview customization. We have listed a few here, and you can get more from the navigation bar as well as the user manual in the download package.

ListView sorting guide for ASP.NET AJAX UI control library
ListView selecting guide for ASP.NET AJAX UI control library
ListView grouping guide for ASP.NET AJAX UI control library
ListView filtering guide for ASP.NET AJAX UI control library

How to Set Paging for ListView

In general there are three things you need to pay attention to for your listview paging. Once you get to know how to set these three thing as you like, you can easily get a customized paging for your listview.

The first one is the AllowPaging property. This is the beginning of the whole story. Only until you set this property to true can you proceed with any further paging customization. Of course, if you really don't need the paging, just disable it right away.

The second property you can set is the PageSize. By assigning a value to this property, you can decide how many items should appear in one page, thus controlling the total number of pages for your listview.

Additionally you can set the Command Argument, which is used to set the buttons which we see all the time, such as First, Pre, Next, Last, just to name a few here.

In the following sample, we will show you how to create a paging for listview that includes buttons for the first page, previous page, next page, last page. You will also be able to set the current page index, as well as the page size.

This is how the paging looks like after the customization:

This is the corresponding aspx sample codes for it:

<kettic:PerListView ID="PerListView1" DataSourceID="SqlDataSource1" runat="server"
                    ItemPlaceholderID="EmployeesContainer" DataKeyNames="CustomerID" AllowPaging="true"
                    PageSize="6">
                    <LayoutTemplate>
                        <fieldset id="FieldSet1">                            
                                <div style="float: left; margin-left: 25%; ">
                                    <asp:Button runat="server" ID="btnFirst" CommandName="Page" CommandArgument="First"
                                        Text="First" Enabled="<%#Container.CurrentPageIndex > 0 %>"></asp:Button>
                                    <asp:Button runat="server" ID="btnPrev" CommandName="Page" CommandArgument="Prev"
                                        Text="Prev" Enabled="<%#Container.CurrentPageIndex > 0 %>"></asp:Button>
                                    <span style="vertical-align: middle; line-height:22px; display:inline-block; ">Page
                                        <%#Container.CurrentPageIndex + 1 %>
                                        of
                                        <%#Container.PageCount %></span>
                                    <asp:Button runat="server" ID="btnNext" CommandName="Page" CommandArgument="Next"
                                        Text="Next" Enabled="<%#Container.CurrentPageIndex + 1 < Container.PageCount %>">
                                    </asp:Button>
                                    <asp:Button runat="server" ID="btnLast" CommandName="Page" CommandArgument="Last"
                                        Text="Last" Enabled="<%#Container.CurrentPageIndex + 1 < Container.PageCount %>">
                                    </asp:Button>
                                </div>
                                <div>
                                    <span style="vertical-align: middle; font-weight: bold;line-height:22px; padding-left: 5px;">Page Size:</span>
                                    <kettic:PerComboBox runat="server" ID="cmbPageSize" OnSelectedIndexChanged="cmbPageSize_SelectedIndexChanged"
                                        AutoPostBack="true" Width="60px" SelectedValue="<%#Container.PageSize %>">
                                        <Items>
                                            <kettic:PerComboBoxItem Text="3" Value="3"></kettic:PerComboBoxItem>
                                            <kettic:PerComboBoxItem Text="6" Value="6"></kettic:PerComboBoxItem>
                                            <kettic:PerComboBoxItem Text="9" Value="9"></kettic:PerComboBoxItem>
                                            <kettic:PerComboBoxItem Text="12" Value="12"></kettic:PerComboBoxItem>
                                        </Items>
                                    </kettic:PerComboBox>
                                </div>
                            </div>
                        </fieldset>
                    </LayoutTemplate>
                </kettic:PerListView>

ASP.NET AJAX UI Controls

ASP.NET AJAX ListView UI Control

Overview Getting Started Templates

Features

Paging Sorting Selecting Grouping Filtering

Data Binding

DataSource Data ASP.NET AJAX ToolBar UI Control ASP.NET AJAX TabControl UI Control ASP.NET AJAX Menu UI Control ASP.NET AJAX ToolTip UI Control