New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Integrated paging

Employees
Company: Consolidated Holdings
Name: Elizabeth Brown
Title: Sales Representative
City: London
Country: UK
Phone: (171) 555-2282
Photo of Elizabeth Brown
Company: FISSA Fabrica Inter. Salchichas S.A.
Name: Diego Roel
Title: Accounting Manager
City: Madrid
Country: Spain
Phone: (91) 555 94 44
Photo of Diego Roel
Company: Folk och fä HB
Name: Maria Larsson
Title: Owner
City: Bräcke
Country: Sweden
Phone: 0695-34 67 21
Photo of Maria Larsson
Company: France restauration
Name: Carine Schmitt
Title: Marketing Manager
City: Nantes
Country: France
Phone: 40.32.21.21
Photo of Carine Schmitt
Company: Franchi S.p.A.
Name: Paolo Accorti
Title: Sales Representative
City: Torino
Country: Italy
Phone: 011-4988260
Photo of Paolo Accorti
Company: Galería del gastrónomo
Name: Eduardo Saavedra
Title: Marketing Manager
City: Barcelona
Country: Spain
Phone: (93) 203 4560
Photo of Eduardo Saavedra
Page 1 of 12
Page Size:

This example demonstrates how to use the internal event bubbling mechanism of RadListView for ASP.NET AJAX to execute paging operations using buttons residing inside the listview's body. The requirements for that is to assign CommandName = 'Page' and appropriate CommandArgument values for the corresponding LinkButton/Button/ImageButton controls (the list of internally recognized CommandArgument values is available in the help topic linked at the bottom). Thus the listview instance will fetch the corresponding set of data from its data source and display the results.

Keep in mind that you need to specify ItemPlaceholderID property value for RadListView which matches the id of an ASP.NET server control (with id and runat=server properties set) which will be used as a holder of the actual listview data content. The RadListView instance on the example has asp PlaceHolder defined inside its LayoutTemplates for this purpose.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.ListViewExamplesVBNET.Paging.IntegratedPaging.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="H4H5H6" />
    <div class="demo-container">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ListViewPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <div class="demoWrapper">
            <asp:Panel ID="ListViewPanel1" runat="server">
                <telerik:RadListView ID="RadListView1" DataSourceID="SqlDataSource1" runat="server" RenderMode="Lightweight"
                    ItemPlaceholderID="EmployeesContainer" DataKeyNames="CustomerID" AllowPaging="true"
                    PageSize="6">
                    <LayoutTemplate>
                        <fieldset id="FieldSet1">
                            <legend>Employees</legend>
                            <asp:PlaceHolder ID="EmployeesContainer" runat="server"></asp:PlaceHolder>
                            <div class="clear">
                            </div>
                            <div class="pagerWrapper">
                                <div class="demoPager">
                                    <telerik:RadButton RenderMode="Lightweight" runat="server" ID="btnFirst" CommandName="Page" CommandArgument="First"
                                        Text="First" Enabled="<%#Container.CurrentPageIndex > 0 %>"></telerik:RadButton>
                                    <telerik:RadButton RenderMode="Lightweight" runat="server" ID="btnPrev" CommandName="Page" CommandArgument="Prev"
                                        Text="Prev" Enabled="<%#Container.CurrentPageIndex > 0 %>"></telerik:RadButton>
                                    <span class="numericPageSize">Page
                                        <%#Container.CurrentPageIndex + 1 %>
                                        of
                                        <%#Container.PageCount %></span>
                                    <telerik:RadButton RenderMode="Lightweight" runat="server" ID="btnNext" CommandName="Page" CommandArgument="Next"
                                        Text="Next" Enabled="<%#Container.CurrentPageIndex + 1 < Container.PageCount %>"></telerik:RadButton>
                                    <telerik:RadButton RenderMode="Lightweight" runat="server" ID="btnLast" CommandName="Page" CommandArgument="Last"
                                        Text="Last" Enabled="<%#Container.CurrentPageIndex + 1 < Container.PageCount %>"></telerik:RadButton>
                                </div>
                                <div>
                                    <span class="pageSize">Page Size:</span>
                                    <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="cmbPageSize" OnSelectedIndexChanged="cmbPageSize_SelectedIndexChanged"
                                        AutoPostBack="true" Width="60px" SelectedValue="<%#Container.PageSize %>">
                                        <Items>
                                            <telerik:RadComboBoxItem Text="3" Value="3"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="6" Value="6"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="9" Value="9"></telerik:RadComboBoxItem>
                                            <telerik:RadComboBoxItem Text="12" Value="12"></telerik:RadComboBoxItem>
                                        </Items>
                                    </telerik:RadComboBox>
                                </div>
                            </div>
                        </fieldset>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <fieldset class="fieldsetBox">
                            <legend>Company:
                                <%#Eval("CompanyName")%>
                            </legend>
                            <table class="itemTable">
                                <tr>
                                    <td class="cellInfo">
                                        <table cellpadding="6" cellspacing="0">
                                            <tr>
                                                <td class="cellLabel">Name:
                                                </td>
                                                <td class="cellInfo">
                                                    <%#Eval("ContactName")%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Title:
                                                </td>
                                                <td>
                                                    <%#Eval("ContactTitle")%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>City:
                                                </td>
                                                <td>
                                                    <%# Eval("City")%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Country:
                                                </td>
                                                <td>
                                                    <%# Eval("Country")%>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Phone:
                                                </td>
                                                <td>
                                                    <%#Eval("Phone")%>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class="image">
                                        <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%# IIf(Eval("Photo") IsNot DBNull.Value, Eval("Photo"),New System.Byte(-1) {})%>'
                                            AutoAdjustImageControlSize="false" Width="90px" Height="110px" ToolTip='<%#Eval("ContactName", "Photo of {0}") %>'
                                            AlternateText='<%#Eval("ContactName", "Photo of {0}") %>'></telerik:RadBinaryImage>
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                    </ItemTemplate>
                </telerik:RadListView>
            </asp:Panel>
        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [City], [Country], [Phone], [Photo] FROM [CustomerPhotos]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance