How to add CSS Styles to DataPager

Question

Hi all,

I have a simple question. I have a ListView which I have added a DataPager control to.

At present the DataPager is just plain numeric based. Just wondering, is it possible to add CSS styles to the numeric numbers IE have a 1px solid border around each number ect.

Any help would be greatly appreciated.

Answer 1

You can set CssClass for your control I think that can do what you want. I don't test it so just an ideal! Hope this helpfull 4 you! CssClass="Pagging" Pagging{ border:1px solid #000; }

Answer 2

you'll need to look at <PagerTemplate> here's some information:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.templatepagerfield.pagertemplate.aspx

Answer 3

I don't know what a DataPager control is. But if it's some kind of pagination* class, and you want to do something like what's at the bottom of the StackOverflow New Questions page, then yes it is completely doable in CSS.

In most cases, the page numbers are just hyperlinks. So what you can do is find out what class the pagination control uses for the links, and style them the way you want. For instance, if the HTML looks something like this:

<div class="pagination">
    <span class="page_cur">1</span>
    <a href="news.php?page=2" class="page_num">2</a>
    <a href="news.php?page=3" class="page_num">3</a>
    <a href="news.php?page=4" class="page_num">4</a>
    <a href="news.php?page=5" class="page_num">5</a>
    ...
</div>

Then you'll want to include something like this in your CSS:

<style>
div.pagination > span.page_cur, div.pagination > a.page_num {
   display: block;
   float: left;
   padding: 4px;
}
div.pagination > span.page_cur {
   background-color: #ddd;
   border: 1px solid #ddd;
}
div.pagination > a.page_num {
   background-color: #fff;
   border: 1px solid #e0e0e0;
}
</style>

If you don't know the CSS selectors to use for the pagination numbers, I suggest taking a look at some online references on CSS selectors. The Firebug plugin for Firefox is also very helpful in identifying layout elements and the styles currently applied to them.

*StackOverflow doesn't like URLs with underscores in them apparently: Pagination

Answer 4

As Nguyen Hiep answered, setting a CSSClass to the control might help. Then look at the source code generated by the control. The reason the CssClass might not be removing the border could be that .NET has the tendency to wrap the generated HTML elements in extra divs or tables (the border might be set on a different element contained in that div) Once you find out which element has the css class, use CSS descendant selector to remove the border.

Answer 5

Because in .NET when it generate a control it automatically add prefix something like: controlID = "data_customer" and became like that ctrl_1_etc_ + data_customer. So you must write all the long name of this control in CSS file and it work for sure! Hope this help you!

Answer 6

insert NumericButtonCssClass to the NumericPagerField

in my expel i call it datapager

       <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="20">
    <Fields>
        <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="False" ShowNextPageButton="False"
            ShowPreviousPageButton="False" />
           <asp:NumericPagerField NumericButtonCssClass="datapager" />
        <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="False" ShowNextPageButton="False"
            ShowPreviousPageButton="False" />
    </Fields>
</asp:DataPager>

and in the stylesheet you make

          .datapager
          {
            color:black;
            border: 1px solid black;
          }

I think it will solve your problem

Answer 7

Saadan answer is the best one for this question. Upvoted

Just define a cssclass inside the pager tag. The control to modified you can find by the property name