Skip to content

Instantly share code, notes, and snippets.

@JayDouglass
Created May 14, 2013 20:27
Show Gist options
  • Save JayDouglass/5579242 to your computer and use it in GitHub Desktop.
Save JayDouglass/5579242 to your computer and use it in GitHub Desktop.
A subclass of GridView which outputs bootstrap compatible markup for the table and pagination.
Namespace Controls.Bootstrap
Public Class GridView
Inherits WebControls.GridView
Public Sub New()
UseAccessibleHeader = True
AddHandler DataBound, AddressOf UseTableHeaderTag
End Sub
Protected Overrides Function CreateControlStyle() As Style
Return New TableStyle With {.GridLines = GridLines.None, .CellSpacing = -1}
End Function
Private Sub UseTableHeaderTag(sender As Object, e As EventArgs)
If Rows.Count > 0 Then HeaderRow.TableSection = TableRowSection.TableHeader
End Sub
''' <summary>
''' Bootstrap pagination markup
''' </summary>
Protected Overrides Sub InitializePager(row As GridViewRow, columnSpan As Integer, pagedDataSource As PagedDataSource)
'Dim cell = New TableCell() With {.ColumnSpan = columnSpan}
'row.CssClass = "bootstrap-pagination-gridviewrow"
'row.Cells.Add(cell)
Dim divRow = New HtmlGenericControl("div")
divRow.Attributes("class") = "row-fluid dashboard-admin-pagination"
Controls.Add(divRow)
Dim divLeft = New HtmlGenericControl("div")
divLeft.Attributes("class") = "span5"
Dim firstItemNumber = pagedDataSource.PageSize * pagedDataSource.CurrentPageIndex + 1
Dim lastItemNumber = Math.Min(firstItemNumber + pagedDataSource.PageSize - 1, pagedDataSource.DataSourceCount)
Dim totalItemCount = pagedDataSource.DataSourceCount
divLeft.InnerText = String.Format("Showing {0} to {1} of {2}", firstItemNumber, lastItemNumber, totalItemCount)
divRow.Controls.Add(divLeft)
Dim divRight = New HtmlGenericControl("div")
divRight.Attributes("class") = "span7"
divRow.Controls.Add(divRight)
Dim divPagination = New HtmlGenericControl("div")
divPagination.Attributes("class") = "pagination pagination-right pagination-gridview"
'Me.Controls.Add(divPagination)
divRight.Controls.Add(divPagination)
Dim list = New HtmlGenericControl("ul")
divPagination.Controls.Add(list)
Dim addListItem = _
Sub(control As Control, cssClass As String)
Dim listItem = New HtmlGenericControl("li")
listItem.Controls.Add(control)
list.Controls.Add(listItem)
If Not String.IsNullOrEmpty(cssClass) Then listItem.Attributes("class") = cssClass
End Sub
Dim previousLink = New PagerLinkButton(Me)
previousLink.Controls.Add(New LiteralControl("<i class=""icon-angle-left""></i> Previous"))
previousLink.CommandName = "Page"
previousLink.CommandArgument = "Prev"
If PageIndex = 0 Then previousLink.Enabled = False
addListItem(previousLink, If(PageIndex = 0, "disabled", Nothing))
Dim totalPagerLinkButtons = 5
Dim leftOffset = CInt(Math.Floor(totalPagerLinkButtons / 2))
Dim rightOffset = totalPagerLinkButtons - 1 - leftOffset
Dim currentPageNumber = PageIndex + 1
Dim lastPageNumber = PageCount
Dim startPage = currentPageNumber - leftOffset
Dim endPage = currentPageNumber + rightOffset
If startPage < 1 Then
startPage = 1
endPage = startPage + totalPagerLinkButtons - 1
End If
If endPage > lastPageNumber Then
endPage = lastPageNumber
startPage = Math.Max(endPage - (totalPagerLinkButtons - 1), 1)
End If
For i = startPage To endPage
Dim link = New PagerLinkButton(Me)
link.Text = i.ToString()
link.CommandName = "Page"
link.CommandArgument = i.ToString()
addListItem(link, If(i = PageIndex + 1, "active", Nothing))
Next
Dim nextLink = New PagerLinkButton(Me)
nextLink.Controls.Add(New LiteralControl("Next <i class=""icon-angle-right""></i>"))
nextLink.CommandName = "Page"
nextLink.CommandArgument = "Next"
If PageIndex + 1 = PageCount Then nextLink.Enabled = False
addListItem(nextLink, If(PageIndex + 1 = PageCount, "disabled", Nothing))
End Sub
End Class
End Namespace
@dannylloyd
Copy link

You should add link.Enabled = Not (i = (PageIndex + 1)) just above addListItem(link, If(i = PageIndex + 1, "active", Nothing)). That way the inactive links aren't clickable. I did this with my copy.

@jonnymaboy
Copy link

hi, what is the PagerLinkButton. I have had a look at the code above and its gives an error saying either change it to lknbutton or pager button. Can you pelase advise thanks

@JayDouglass
Copy link
Author

jonnymaboy: it's in another gist https://gist.github.com/JayDouglass/5579303
if there's anything else missing checkout my gists at https://gist.github.com/JayDouglass

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment