Customizing the pager UI

[Kartheek Narahari]

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.

[Kartheek Narahari]

Can some one from telerik reply to this?

[Dimo]

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.

[Kartheek Narahari]

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.

[Kartheek Narahari]

Can some one from telerik reply to this ASAP.

Thanks,
Kartheek

[Rosen]

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.

[Kartheek Narahari]

Hi Rosen,

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

Thanks,
Kartheek

[dscho]

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