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?

1 Answer 1

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.

4
  • 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, 2012 at 9:03
  • CAn you please provide code snippet and screenshot? I will help to explain the requirement. Aug 21, 2012 at 9:06
  • I have added some further info above. Please have a look :)
    – KwiZ
    Aug 21, 2012 at 9:37
  • Modified the answer above. Please check. Aug 21, 2012 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.