Customizing the pager UI

8 posts, 1 answers
  1. Kartheek Narahari
    Kartheek Narahari avatar
    6 posts
    Member since:
    Apr 2010

    Posted 27 May 2010 Link to this post

    Hi

    I want to customize the DataPager UI. I would like to show a datapager similar to that of PrevNextNumeric pager. But I want to show all buttons (previous, next and numeric) as plain links (Simple anchor tags in html).  Hide the previous link when the current page is fist page also hide the last button when current page is last page.

    How can I customize the UI? One option I can think of is using PagerTemplate and writing custom code to implement.

    But is there any simple alternative for this? If not can some one provide me with a sample of how it's done u sing pagertemplate.

    Note : I'm using custom paging too. But I think it does not make much difference.

    I have attached how I want the UI to look like.

    Thanks in advance,
    Kartheek.
  2. Kartheek Narahari
    Kartheek Narahari avatar
    6 posts
    Member since:
    Apr 2010

    Posted 28 May 2010 Link to this post

    Can some one from telerik reply to this?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 May 2010 Link to this post

    Hello Kartheek,

    Indeed, in order to achieve the desired look, you need to use RadDataPagerTemplatePageFields.

    Here is how to set the visibility of buttons, depending on the current page index:

    ASPX

    <telerik:RadListView ID="RadListView1" runat="server" DataKeyNames="CategoryID" DataSourceID="SqlDataSource1" PageSize="1" AllowPaging="true">
        <ItemTemplate>
            <asp:Label ID="itemPlaceholder" runat="server" Text='<%# Eval("CategoryID") %> ' />
        </ItemTemplate>
        <LayoutTemplate>
            <div class="RadListView RadListView_Default" style="border:0">
                <asp:Label ID="itemPlaceholder" runat="server" />
                <telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1" PageSize="1"
                    OnFieldCreated="RadDataPager1_FieldCreated">
                    <Fields>
                        <telerik:RadDataPagerTemplatePageField>
                            <PagerTemplate>
                                <asp:LinkButton ID="LinkButtonFirst" runat="server" Text="First" CommandName="Page" CommandArgument="First" />
                                <asp:LinkButton ID="LinkButtonLast" runat="server" Text="Last" CommandName="Page" CommandArgument="Last" />
                            </PagerTemplate>
                        </telerik:RadDataPagerTemplatePageField>
                    </Fields>
                </telerik:RadDataPager>
            </div>
        </LayoutTemplate>
    </telerik:RadListView>
     
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
    </asp:SqlDataSource>

    C#

    protected void RadDataPager1_FieldCreated(object sender, RadDataPagerFieldCreatedEventArgs e)
    {
        if ((sender as RadDataPager).CurrentPageIndex == 0)
            e.Item.FindControl("LinkButtonFirst").Visible = false;
        if ((sender as RadDataPager).CurrentPageIndex == (sender as RadDataPager).PageCount - 1)
            e.Item.FindControl("LinkButtonLast").Visible = false;
    }

    Best wishes,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Kartheek Narahari
    Kartheek Narahari avatar
    6 posts
    Member since:
    Apr 2010

    Posted 28 May 2010 Link to this post

    Hi Dimo ,

    Thanks for the reply,

    I also want to show page numbers as link buttons. How could I achieve that?

    I have 5 listviews in my project, I want to use the same pager for all of them, can I do this as a seperate user control?

    Thanks in advance,
    Kartheek.
  6. Kartheek Narahari
    Kartheek Narahari avatar
    6 posts
    Member since:
    Apr 2010

    Posted 31 May 2010 Link to this post

    Can some one from telerik reply to this ASAP.

    Thanks,
    Kartheek
  7. Answer
    Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 02 Jun 2010 Link to this post

    Hello Kartheek,

    As pointed out by my colleague Dimo, in order to achieve the desired layout, a custom template should be used. Similar to the following:

    <telerik:RadDataPager runat="server" EnableEmbeddedSkins="false" ID="RadDataPager1"
        OnFieldCreated="RadDataPager1_FieldCreated"
        <Fields
            <telerik:RadDataPagerTemplatePageField
                <PagerTemplate
                    <asp:LinkButton ID="LinkButtonPrev" runat="server" Text="Prev" CommandName="Page"
                        CommandArgument="Prev" /> 
                    <asp:PlaceHolder runat="server" ID="numericPlaceHolder" /> 
                    <asp:LinkButton ID="LinkButtonNext" runat="server" Text="Next" CommandName="Page"
                        CommandArgument="Next" /> 
                </PagerTemplate
            </telerik:RadDataPagerTemplatePageField
        </Fields
    </telerik:RadDataPager>

    protected void RadDataPager1_FieldCreated(object sender, RadDataPagerFieldCreatedEventArgs e) 
        var pager = e.Item.Owner; 
        var placeHolder = e.Item.FindControl("numericPlaceHolder") as PlaceHolder; 
        var pageCount = pager.PageCount; 
        for (int i = 0; i < pageCount; i++) 
        
            var linkButton = new LinkButton(); 
            linkButton.ID = "Button" + i; 
            linkButton.Text = i.ToString(); 
            linkButton.CommandName = "Page"
            linkButton.CommandArgument = i.ToString(); 
            placeHolder.Controls.Add(linkButton); 
            if (pager.CurrentPageIndex == i) 
            
                linkButton.Enabled = false
            
            placeHolder.Controls.Add(new LiteralControl(" | ")); 
        
        if (pager.CurrentPageIndex == 0) 
        
            e.Item.FindControl("LinkButtonPrev").Visible = false
        
        if (pager.CurrentPageIndex == pager.PageCount - 1) 
        
            e.Item.FindControl("LinkButtonNext").Visible = false
        
    }

    All the best,
    Rosen
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. Kartheek Narahari
    Kartheek Narahari avatar
    6 posts
    Member since:
    Apr 2010

    Posted 02 Jun 2010 Link to this post

    Hi Rosen,

    Thanks for the help. This is exactly what I needed.

    Thanks,
    Kartheek
  9. dscho
    dscho avatar
    2 posts
    Member since:
    Jan 2009

    Posted 22 Nov 2010 Link to this post

    Hello dear telerik Team,

    thank you for this great Example, perhaps you should
    mention this in your HowTo / code documentation

    The following code is need  to identify the last / first Button within
    the  GridPagerMode.NextPrev / Mode
     
    _grid.PagerStyle.Mode = GridPagerMode.NextPrev;
    _grid.ItemDataBound += new GridItemEventHandler(_gridViewContent_ItemDataBound);
     
    You can resolve further Buttons / Labels it with VS QuickWatch:
     
    e.Item.Controls[0].Controls[0].Controls[0].Controls[0].Controls[0] =>LeftPager Part
    e.Item.Controls[0].Controls[0].Controls[0].Controls[0].Controls[0] =>Right Pager Part
    (Button)e.Item.Controls[0].Controls[0].Controls[0].Controls[0].Controls[0].Controls[1] =>LeftPager Part Button First Page --> The Id is ctl02
     
    if (e.Item is GridPagerItem)
                {
                    GridPagerItem item = e.Item as GridPagerItem;
                    if (item.Paging.IsFirstPage == true)
                    {
                        Control firstPageBtn = e.Item.FindControl("ctl02");
                        if (firstPageBtn != null)
                        {
                            firstPageBtn.Visible = false;
                        }
     
                        Control previosPageBtn = e.Item.FindControl("ctl03");
                        if (previosPageBtn != null)
                        {
                            previosPageBtn.Visible = false;
                        }
                    }
                    if (item.Paging.IsLastPage == true)
                    {
                        Control lastPageBtn = e.Item.FindControl("ctl05");
                        if (lastPageBtn != null)
                        {
                            lastPageBtn.Visible = false;
                        }
     
                        Control nextPageBtn = e.Item.FindControl("ctl04");
                        if (nextPageBtn != null)
                        {
                            nextPageBtn.Visible = false;
                        }
                    }
                }


    Regards
    David
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017