2 - Top and bottom datapager controls,synced

3 posts, 0 answers
  1. Geoff
    Geoff avatar
    27 posts
    Member since:
    May 2012

    Posted 30 May 2012 Link to this post

    I'm trying to add my datapager on both the top and bottom of the page. I figured it would be just adding a second RadDataPager with a different ID set to the same PageControlID, but I get an error when I test the page. Here is what I have markup wise, this is just one controller.

    How would I add that second control in and have it appear at the top of the page?

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadDataPager.aspx.cs" Inherits="JJPro.Web.RadDataPager" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadListView1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadListView1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="0" />
        <telerik:RadListView ID="RadListView1" Width="97%" AllowPaging="True" runat="server"
            AllowSorting="true" ItemPlaceholderID="ProductsHolder" DataKeyNames="GUID" DataSourceID="TestData"
            AllowMultiFieldSorting="True" BorderStyle="None" EnableEmbeddedBaseStylesheet="False">
            <LayoutTemplate>
                <!-- Set the id of the wrapping container to match the CLIENT ID of the RadListView control to display the ajax loading panel
            In case the listview is embedded in another server control, you will need to append the id of that server control -->
                <fieldset style="width: 740px;" id="RadListView1">
                    <legend></legend>
                    <asp:Panel ID="ProductsHolder" runat="server" />
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td>
                                <telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                                    PageSize="9" AllowSEOPaging="False">
                                    <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                        <telerik:RadDataPagerButtonField FieldType="Numeric" />
                                        <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                        <telerik:RadDataPagerPageSizeField PageSizeText="Page size: " PageSizes="3,6,9,12,15"
                                            PageSizeComboWidth="50" />
                                        <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                                            TextBoxWidth="30" />
                                        <telerik:RadDataPagerTemplatePageField>
                                            <PagerTemplate>
                                                <div style="float: right">
                                                    <b>Items
                                                        <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />
                                                        to
                                                        <asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.StartRowIndex+Container.Owner.PageSize %>" />
                                                        of
                                                        <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
                                                        <br />
                                                    </b>
                                                </div>
                                            </PagerTemplate>
                                        </telerik:RadDataPagerTemplatePageField>
                                    </Fields>
                                </telerik:RadDataPager>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </LayoutTemplate>
            <ItemTemplate>
                <div style="float: left;">
                    <table cellpadding="0" cellspacing="0" style="width: 230px; height: 100px">
                        <tr>
                            <td style="width: 20%;">
                            </td>
                            <td style="width: 80%; padding-left: 5px;">
                                <%--# Eval("GUID") --%>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td style="width: 80%; padding-left: 5px;">
                                <asp:Image ID="ProductImage" OnClick="" runat="server" Width="200" Height="200" ImageUrl='<%# Eval("ImageURL", "Images/MockUp/{0}") %>' />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <!--   Text: -->
                            </td>
                            <td style="width: 80%; padding-left: 5px; text-align: center; font-weight: bold;">
                                <%# Eval("ProductText") %>
                            </td>
                        </tr>
                        <tr>
                        </tr>
                        <tr>
                            <td>
                                <hr />
                            </td>
                            <td>
                                <hr />
                            </td>
                        </tr>
                    </table>
                </div>
            </ItemTemplate>
        </telerik:RadListView>
        <asp:SqlDataSource ID="TestData" runat="server" ConnectionString="<%$ ConnectionStrings:dev_gmyersConnectionString %>"
            SelectCommand="SELECT * FROM [DataPagerTestData2]"></asp:SqlDataSource>
        <br />
        </form>
    </body>
    </html>
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 31 May 2012 Link to this post

    Hi Geoff,

    I suggest you examine the project attached in the forum thread below.
    http://www.telerik.com/community/forums/aspnet-ajax/listview/radlistview-with-raddatapager.aspx

    It demonstrates how the desired functionality can be achieved.

    Kind regards,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Geoff
    Geoff avatar
    27 posts
    Member since:
    May 2012

    Posted 31 May 2012 Link to this post

    I'm not sure why I couldn't get it to work the first time around, because I did it basically the same way as the example shown. But it does work now! Here is the markup for future ponderers :)

    <fieldset style="width: 740px;" id="Fieldset1">
        <legend></legend>
        <asp:Panel ID="Panel1" runat="server" />
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td>
                    <telerik:RadDataPager ID="RadDataPager2" runat="server" PagedControlID="RadListView1"
                        PageSize="9" AllowSEOPaging="False" EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False">
                        <Fields>
                            <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                            <telerik:RadDataPagerButtonField FieldType="Numeric" />
                            <telerik:RadDataPagerButtonField FieldType="NextLast" />
                            <telerik:RadDataPagerPageSizeField PageSizeText="Page size: " PageSizes="3,6,9,12,15"
                                PageSizeComboWidth="50" />
                            <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                                TextBoxWidth="30" />
                            <telerik:RadDataPagerTemplatePageField>
                                <PagerTemplate>
                                    <div style="float: right">
                                        <b>Items
                                            <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />
                                            to
                                            <asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.StartRowIndex+Container.Owner.PageSize %>" />
                                            of
                                            <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
                                            <br />
                                        </b>
                                    </div>
                                </PagerTemplate>
                            </telerik:RadDataPagerTemplatePageField>
                        </Fields>
                    </telerik:RadDataPager>
                </td>
            </tr>
        </table>
    </fieldset>
    <fieldset style="width: 740px;" id="RadListView1">
        <legend></legend>
        <asp:Panel ID="ProductsHolder" runat="server" />
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td>
                    <telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                        PageSize="9" AllowSEOPaging="False">
                        <Fields>
                            <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                            <telerik:RadDataPagerButtonField FieldType="Numeric" />
                            <telerik:RadDataPagerButtonField FieldType="NextLast" />
                            <telerik:RadDataPagerPageSizeField PageSizeText="Page size: " PageSizes="3,6,9,12,15"
                                PageSizeComboWidth="50" />
                            <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                                TextBoxWidth="30" />
                            <telerik:RadDataPagerTemplatePageField>
                                <PagerTemplate>
                                    <div style="float: right">
                                        <b>Items
                                            <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />
                                            to
                                            <asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.StartRowIndex+Container.Owner.PageSize %>" />
                                            of
                                            <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
                                            <br />
                                        </b>
                                    </div>
                                </PagerTemplate>
                            </telerik:RadDataPagerTemplatePageField>
                        </Fields>
                    </telerik:RadDataPager>
                </td>
            </tr>
        </table>
    </fieldset>
Back to Top