Customizing Pager to be same as Telerik Forum

[phyrom]

Dear Supporter and All,

I'm customizing pager control and it works almost fine for the functionality except that the look of the NumericPages text style I cannot do it.
Please code behind for the Grid for ItemCreated event

protected void RadGridSummaryView_ItemCreated(object sender, GridItemEventArgs e)
{

if (e.Item is GridPagerItem)
{
GridPagerItem gridPager = e.Item as GridPagerItem;
Control numericPagerControl = gridPager.GetNumericPager();

Control placeHolder = gridPager.FindControl("NumericPagerPlaceHolderSummaryView");
placeHolder.Controls.Add(numericPagerControl);
placeHolder.Controls.Add(new LiteralControl(" "));

}
}

Please the Grid definition for Pager Control as below

<NoRecordsTemplate>
    <span style="padding-left: 10px;">There are no items to show in this view.</span></NoRecordsTemplate>
<PagerTemplate>
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr class="">
            <td width="46%" class="itemPagingBg">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="25%">
                            Showing
                            <telerik:RadComboBox ID="RadCombo_PageSize_GridView" DataSource="<%# new object[]{20, 25, 30, 35, 40} %>"
                                Width="40px" SelectedValue='<%# DataBinder.Eval(Container, "Paging.PageSize") %>' Skin="Windows7"
                                runat="server">
                            </telerik:RadComboBox>
                             results per page
                        </td>
                    </tr>
                </table>
            </td>
            <td class="itemPagingBg" width="54%" style="padding-top: 10px;" align="right">
                <asp:Panel runat="server" ID="NumericPagerPlaceHolderGridView" />
            </td>
        </tr>
    </table>
</PagerTemplate>
<PagerStyle mode="NumericPages" alwaysvisible="True" />

Please see the attached image file result I got. Just below it I have included the desired look and feel of the NumericPage just below the image and this is exactly the same as customized NumericPage of Telerik Forum. Please advise how I can achieve this by extending my code.

Thank you in advance for all your inputs.
Regards,
Phyrom

[Shinu]

Hello,

You can use PagerTemplate for customizing the default pager. Check the following help documentation which explains more about this.
Setting Pager Template.

-Shinu.

[phyrom]

Hi Shini, I can't find where to format css the paging item for pageNumeric mode. I want to apply the same css style the same way as pagerNumeric mode used in Telerik forum. Please help how I can achieve it. Thanks for your input. Regards, Phyrom

[Shinu]

Hello,

Try setting the CSS.
CSS:

.RadGrid .rgNumPart a
{
 border: 1px solid #AFD1FF !important;
 line-height: 1.8 !important;
 margin-right: 5px !important;
 padding: 2px 7px !important;
}
.RadGrid_Default .rgNumPart a:hover, .RadGrid_Default .rgNumPart a:hover span, .RadGrid_Default  a.rgCurrentPage, .RadGrid_Default .rgNumPart a.rgCurrentPage span
{
 background-image:none !important;
}
.RadGrid_Default .rgNumPart a.rgCurrentPage
{
 border:1px solid #EEEEEE !important;
}
.RadGrid_Default .rgNumPart a:hover
{
 border:1px solid black !important;
}

-Shinu.

[phyrom]

Hi Shinu,

It works awesome with your guidance. I have made some change to reflect my scenario here. I have also attached my result as well for comment.

set RadGrid control EnableEmbeddedSkins="false"
and make some change to css as the following

.rgCurrentPage
{
    font-family: "Lucida Sans", "Trebuchet MS", Tahoma;
    font-size:1.2em;
    height:15px;
    min-width:15px;
    text-align: center;
    line-height: 19px;
    border: 1px solid transparent !important;
    color:#666666 !important;
    font-weight:bolder;
    margin: 2px;
    padding: 2px 7px;
}

.rgNumPart a {
    font-family: "Lucida Sans", "Trebuchet MS", Tahoma;
    font-size:1.2em;
    height:15px;
    min-width:15px;
    text-align:center;
    border: 1px solid #376AAC;
    line-height: 19px;
    margin: 2px;
    padding: 2px 7px;
}
.rgNumPart a:hover {
    border:1px solid #808080 !important;
    color:#808080 !important;
    text-decoration:none;
}

I have commented out the following CSS because I don't see it affecting format

/*
.rgNumPart a:hover, .rgNumPart a:hover span, a.rgCurrentPage, .rgNumPart a.rgCurrentPage span

{

 background-image:none !important;

}
*/

/*
.rgNumPart a.rgCurrentPage

{

 border:1px solid #EEEEEE !important;

}
*/

Regards,
Phyrom

[phyrom]

Hi Shinu,

In addition, can you guide how we can extend this to have a previous and next buttons just before and after the numberic buttons respectively. The next and previous button in this is just ... inside the border.

Your input really helps solving my issue away. Once again thank you.

Regards,
Phyrom

[phyrom]

Hi Shinu,
Before the all css to format the numericPages paging works fine with the setting of EnableEmbeddedSkin="False". However, when remove and add Skin="" instead, it turns out that only one item of css works. And that css item is .rgCurrentPage while other css items just do not take effect to the numericPages.

Please find the new css setting after which I remove EnableEmbeddedSkin="False"  and add Skin="" instead.

.rgCurrentPage
{
    font-family: "Lucida Sans", "Trebuchet MS", Tahoma;
    font-size:1.2em;
    height:15px;
    min-width:15px;
    text-align: center;
    line-height: 19px;
    border: 1px solid transparent !important;
    color:#666666 !important;
    font-weight:bolder;
    margin: 2px;
    padding: 2px 7px;
}

.RadGrid .rgNumPart a.rgCurrentPage
{
 border:1px solid #EEEEEE !important;
}

.RadGrid .rgNumPart a {
    font-family: "Lucida Sans", "Trebuchet MS", Tahoma;
    font-size:1.2em;
    height:15px;
    min-width:15px;
    text-align:center;
    border: 1px solid #376AAC;
    line-height: 19px;
    margin: 2px;
    padding: 2px 7px;
}

.RadGrid .rgNumPart a:hover, .RadGrid .rgNumPart a:hover span, .RadGrid  a.rgCurrentPage, .RadGrid .rgNumPart a.rgCurrentPage span {
    border:1px solid #808080 !important;
    color:#808080 !important;
    text-decoration:none;
}

Please advice how to make other css items work in this scenario of Skin="".

Regards,
Phyrom

[Shinu]

Hello Phyrom,

When we are giving skin="" no skin will be applied to the Grid so there won't be any CSS class. That is why the CSS classes are not come in effect. Hope you understand. You need to create seperate CSS class for each of the items such as PagerStyle-CssClass="pagerCSS" SelectedItemStyle-CssClass="selectedItem" etc and define the styles.

Hope it helps.

Thanks,
Shinu.

[phyrom]

Hi Shinu,

Thanks for your explanation. I'm just wondering how this .rgCurrentPage take effect once giving skin="". Is it special case here?

As per your advice it is to define PagerStyle-CssClass="pagerCSS". I'm still getting lost on how I can turn my existing css to work with the new css class i.e "pagerCSS".  Can you please advise how to redefine existing css for a new class for pagerCSS?

Once again thanks for your helpful input.

Regards,
Phyrom