2

I'm using DataPager to paginate a ListView, and I set ButtonCount property for NumericPagerField as, say, 5 to limit the maximum count of page numbers to be displayed to 5. But by doing that, when there's more than 5 pages it shows 1 or 2 ellipses (...). Is there any way to style these ellipses or make them dissappear?

Edit: I want to clarify this a bit. What I want to do is hiding the ellipsis in the DataPager when total number of pages exceeds the ButtonCount property (probably by styling display:none but I can't find a way to set css style for it). Please see the image below

enter image description here

Here is my code:

<asp:DataPager ID="datapager" PageSize="16" PagedControlID="someId" runat="server"
                QueryStringField="page">
                ...
                <Fields>
                    <asp:NumericPagerField RenderNonBreakingSpacesBetweenControls="false" NumericButtonCssClass="someClass other"
                        CurrentPageLabelCssClass="someClass current" ButtonCount="4" />
                </Fields>
                ...
            </asp:DataPager>

As you can see, I have set css class for numeric buttons and page label, but it doesn't apply for the ellipsis. So I can't select the ellipsis in my stylesheet. Any idea?

KwiZ
  • 1,364
  • 2
  • 15
  • 25

1 Answers1

6

You can set NextPreviousButtonCssClass attribute of NumericPagerField to a CSS class to hide ellipsis as below -

CSS -

.nextPreviousButtonCSS
{
    display: none;
}

ASP.NET -

<Fields>
    <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="false" ShowNextPageButton="false"
        ShowPreviousPageButton="true" ButtonCssClass="ButtonCSS" />
    <asp:NumericPagerField RenderNonBreakingSpacesBetweenControls="false" NumericButtonCssClass="someClass other"
        NextPreviousButtonCssClass="nextPreviousButtonCSS" CurrentPageLabelCssClass="someClass current"
        ButtonCount="4" />
    <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="false" ShowPreviousPageButton="false"
        ShowNextPageButton="true" ButtonCssClass="ButtonCSS" />
</Fields>

Note: You need to add next and previous buttons manually as above with NextPreviousPagerField tag.

Hope this helps.

Parag Meshram
  • 8,281
  • 10
  • 52
  • 88
  • thanks for replying but this is not really what I'm looking for. I want to hide the ellipsis in the DataPager when total number of pages exceeds the ButtonCount property (probably by styling display:none but I can't find a way to set css style for it). Do you have any idea? – KwiZ Aug 21 '12 at 09:03
  • CAn you please provide code snippet and screenshot? I will help to explain the requirement. – Parag Meshram Aug 21 '12 at 09:06
  • I have added some further info above. Please have a look :) – KwiZ Aug 21 '12 at 09:37
  • Modified the answer above. Please check. – Parag Meshram Aug 21 '12 at 11:08