Adding the a Bootstrap Pagination to the GridView Adapter

See Bootstrap Pagination

Figure 1 – Bootstrap Pager Styles 1, 2 & 3 from Bootstrap

The GridView has some setting that determine how the none template GridView pager is rendered (see Figure 2) here we have the usual settings. Looking at the Pager Mode PagerTypes in Figure 3 there are only four type we can select from these are shown in Figure 4, 2 – 4 1 is closer to what I like first previous next last with number in between and it’s this one I will use as my NumericFirstLast. Going back to Figure 2 we can see three areas we can get other customisation information from.

1. PageButtonCount – the number of numeric buttons to show
2. How the buttons will show i.e. the symbol or image for the first last next previous buttons, if there are no values here we will use the Glyphicons from Bootstrap.
3. Position – this will indicate the position of the pager

Figure 2 – Pager Settings In Visual Studio

---

Figure 3 – Pager Mode  PagerTypes

Figure – 4 My Bootstrap pager styles

If we look at what is currently rendered from the GridView Control adaptor we can learn what it’s doing

Figure 5 – Default pager settings

Figure 6 – Bootstrap pager settings

In Figures 5 & 6 I have changed to default pager setting to some custom setting for Bootstrap this should look something like Figure 4 pager #4 if we look at what is rendered before we make changes to the control adaptor we see Figure 7 which is a DIV with a series of anchor tags (<a></a>) and a span tag indicating the selected item for Numbers.

Figure 7 – Default Pager Output From Control Adaptor

So in Figure 8 the default render code we see all it is doing is getting the series of controls inside the default pager which is inside an inner table the code just finds the innermost controls and renders them without the table.

Figure 8 – Default Pager Render Code

So we need to add the unordered-list and surround each hyper-link with an list element (LI) and indicate which item is currently active (that will be the span) and add the “active” class to the item to get that working.

Figure 9 – Updated Pager Render Code

In Figure 9 we have added the unordered-list wrapper and also wrapped each anchor/hyper-link with an LI tag and added the active class for when an item is selected. There is no PagerStyles.PagerItemSelectedCssClass se we will have to hard code that. In Figure 10 we can see out finished Bootstrap pager.

Figure 10 – Finished Pager

Note: You can also create you own custom pagers any way you want look at the default one that come with Dynamic Data for ideas.

You can find the download code in the usual folder on my SkyDrive and the source code is here Bootstrap Friendly Control Adaptors

Next I plan to finish up making this Dynamic Data Project Template ready for access via the Visual Studio Gallery.

!Important: This is not only for Dynamic Data it will add Bootstrap love to any .Net 4.x Web Application

Updated: Now On NuGet.org Bootstrap Friendly Control Adapters you will still need to change the CSS and Pagers etc. manually but as soon as I get the Project Template done you won’t need to.