Search code examples
asp.netdatapagerellipsis

How to style ASP.NET DataPager ellipsis


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?


Solution

  • 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.