Introduction
In browsing around for a control to display data in a vertical fashion, I found a number of articles describing how to rotate the data, but none on how to create something with any formatting. Basically, several articles describe how to use the AutoGenerateColumns
function of the DataGrid
to allow the rows of a DataTable
to be repeated horizontally instead of vertically. (A good example: Displaying vertical rows in a DataGrid.)
While this method works great for some instances, it really doesn't give much control over the formatting of the output. So, I made my first custom web control - the vertical grid. Due to the limitations of a DataGrid
, I actually based it off the Table
WebControl and created the table from scratch. This way, instead of just flipping the rows in the DataTable
, it just renders the column data as rows in your HTML output.
Standard DataGrid
This is a very basic example.
Name | Email | Phone |
Jack | jack@joe.com | 456-1234 |
Jill | Jill@joe.com | 123-4567 |
Jim | Jim@joe.com | 867-5309 |
Vertical DataGrid
Name | Jack | Jill | Jim |
Email | jack@joe.com | Jill@joe.com | Jim@joe.com |
Phone | 456-1234 | 123-4567 | 867-5309 |
The Code
The key to the control is overriding the Render
method for a table. Then, we can take the basic formatting for a table and add our own functionality to it. There are a lot more properties that I did not implement, but feel free to add to it. I primarily use CSS for all of my formatting, so that was the #1 priority for this. I also added the ability to do a raw style on the columns, but it's formatted just as you would for a CSS (style="element:value;"
). This code would be included in a custom WebControl object which would inherit the System.Web.UI.WebControls.Table
object.
Protected Overrides Sub Render(ByVal output As System.Web.UI.HtmlTextWriter)
Dim i, j As Int16
Dim sTmp As String = ""
For i = 0 To _DataSource.Columns.Count - 1
_text &= vbTab & "<tr>" & vbCr
If _ShowHeader Then
sTmp = ""
If _HeaderStyle <> "" Then
sTmp = " style='" & _HeaderStyle & "'"
End If
If _HeaderCssClass <> "" Then
sTmp &= " class='" & _HeaderCssClass & "'"
End If
_text &= vbTab & vbTab & "<td" & sTmp & ">" & _
_DataSource.Columns(i).ColumnName & "</td>" & vbCr
End If
For j = 0 To _DataSource.Rows.Count - 1
sTmp = ""
If (_AltColumnStyle <> "" Or _
_AltColumnCssClass <> "") And j Mod 2 = 1 Then
If _AltColumnStyle <> "" Then
sTmp = " style='" & _AltColumnStyle & "'"
End If
If _AltColumnCssClass <> "" Then
sTmp &= " class='" & _AltColumnCssClass & "'"
End If
Else
If _ColumnStyle <> "" Then
sTmp = " style='" & _ColumnStyle & "'"
End If
If _ColumnCssClass <> "" Then
sTmp &= " class='" & _ColumnCssClass & "'"
End If
End If
_text &= vbTab & vbTab & "<td" & sTmp & ">" & _
_DataSource.Rows(j).Item(i) & "</td>" & vbCr
Next
_text &= vbTab & "</tr>" & vbCr
Next
sTmp = ""
If Style.Count <> 0 Then
Dim item As String
For Each item In Style.Keys
sTmp &= item & ":" & Style.Item(item) & ";"
Next
sTmp = " style=""" & sTmp & """"
End If
If CssClass <> "" Then
sTmp &= " class='" & CssClass & "'"
End If
If BackColor.Name <> "" Then
sTmp &= " bgcolor=""" & BackColor.Name & """"
End If
If BorderColor.Name <> "" Then
sTmp &= " BorderColor=""" & BorderColor.Name & """"
End If
If Not IsDBNull(BorderWidth) Then
sTmp &= " border=""" & BorderWidth.ToString & """"
End If
If Not IsDBNull(CellPadding) Then
sTmp &= " CellPadding=""" & CellPadding.ToString & """"
End If
If Not IsDBNull(CellSpacing) Then
sTmp &= " CellSpacing=""" & CellSpacing.ToString & """"
End If
_text = vbCr & "<table" & sTmp & ">" & vbCr & _text & "</table>" & vbCr
output.Write([Text])
End Sub
Since I've included the DLL in the download, you can also just add the object to your Visual Studio .NET toolbox. After much toil and trouble, I found that to be the easiest way to add custom controls to your page.
Then, to bind your data and format the table the way you like, you can simply do something like this:
Dim dt As New DataTable()
dt = GetDBTable("SELECT * FROM tbl")
'replace this with whatever data you want
VerticalDataGrid1.DataSource = dt
'then you can set the style and such here if you like or on the HTML page
VerticalDataGrid1.ShowHeader = True
VerticalDataGrid1.HeaderStyle = "BACKGROUND-COLOR: SILVER;"
VerticalDataGrid1.BackColor = Color.White
VerticalDataGrid1.CellPadding = 2
VerticalDataGrid1.DataBind()
From there on out, it's up to you.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.