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.
- PageButtonCount – the number of numeric buttons to show
- 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.
- 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
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.