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