Customizing RadGrid Pager style

[Kamel]

Dear Sir,
I am trying to customize RadGrid pager style, below is the declaration of my grid.

<telerik:RadGrid ID="grdResult" runat="server"
                            EnableEmbeddedSkins="false" Skin="MyCustomSkin"
                            AllowPaging="True" AutoGenerateColumns="False" Width="652px" Height="100%" BackColor="white"  BorderStyle="None"
                            GridLines="None" Visible="true" >
                        <ClientSettings EnableAlternatingItems="false">
                        </ClientSettings>
                        <MasterTableView >
                        <HeaderStyle BorderStyle="Dashed" />
                        <Columns>
                        <telerik:GridBoundColumn DataField="Search Result" HeaderText="Search result">
                        <HeaderStyle Font-Bold="true" />
                        </telerik:GridBoundColumn>
                        </Columns>
                        </MasterTableView>
                        <PagerStyle CssClass="RadGridPager" Mode="NextPrevAndNumeric" Position="TopAndBottom"
                            NextPageImageUrl="images/nextpage.gif" NextPageText=" " PrevPageText=" "
                            PrevPageImageUrl="images/prevpage.gif" FirstPageImageUrl="images/firstpage.gif"
                            FirstPageText=" " LastPageImageUrl="images/lastpage.gif" LastPageText=" " Width="200px"
                            ShowPagerText="true" PagerTextFormat="{4}  Page <b>{0}</b> of <b>{1}</b>, Total: <b>{5}</b> records." AlwaysVisible="false" >
                        </PagerStyle>
                        <FilterMenu EnableEmbeddedSkins="False"></FilterMenu>
                        <HeaderContextMenu EnableEmbeddedSkins="False"></HeaderContextMenu>
                    </telerik:RadGrid>

The issue is that when the user is at the first page, I need to modify the FirstPage and Previous page Images (so that he knows that they are disabled). Also when he is at the last page, I need to modify the NextPage and Last Page images.
Can this be done? If yes, please provide me with instructions to do it.

Thank you and Best regards.

[Princy]

Hello,

Check the following forum thread which discuss the same.
disable grid paging arrows

Thanks,
Princy.

[Kamel]

Dear Princy,
I tried the below and it works only if I am using the default skin images,
if I am specifying image urls by using NextPageImageUrl="images/nextpage.gif", the images don't disappear.

Any turn around for this?
Best Regards. 

[Veli]

Hi Kamel,

When using custom imaged, the pager items do not have the required CSS classes. That is why you cannot use the suggested CSS to hide the first and last pager buttons.

You need to use the server-side ItemDataBound event in this scenario. In the event handler, you have to find all images that need to be hidden in the pager item and hide them:

protected void RadGrid1_OnItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridPagerItem)
    {
        var pager = (GridPagerItem)e.Item;
        if (e.Item.OwnerTableView.CurrentPageIndex == 0)
        {
            HidePagerImagesRecursive(e.Item, RadGrid1.PagerStyle.FirstPageImageUrl, RadGrid1.PagerStyle.PrevPageImageUrl);
        }
        else if (e.Item.OwnerTableView.CurrentPageIndex == e.Item.OwnerTableView.PageCount - 1)
        {
            HidePagerImagesRecursive(e.Item, RadGrid1.PagerStyle.NextPageImageUrl, RadGrid1.PagerStyle.LastPageImageUrl);
        }
    }
}

private void HidePagerImagesRecursive(Control container, params string[] imageUrls)
{
    foreach (Control ctrl in container.Controls)
    {
        var image = ctrl as System.Web.UI.WebControls.Image;
        if (image != null && imageUrls.Contains(image.ImageUrl))
        {
            ctrl.Visible = false;
        }
        else if (ctrl.Controls.Count > 0)
        {
            HidePagerImagesRecursive(ctrl, imageUrls);
        }
    }
}

Using the above approach, images are selectively hidden based on their image URLs and the current index.

Veli
the Telerik team