<< Adding Round Corners to Web Page elements. | Overriding ASP.NET themes’ skin attributes >>

Creating a databound grid view control from a sample wireframe table

by César Muñoz 15. October 2008 04:40

What are we facing?

I am an ASP.NET programmer and need to complete some web pages that I received from a web graphic designer. I have to provide an implementation for a read-only table with specific visual characteristics and it must get its data from a database.

The Solution

One possible solution is to use an ASP.NET 2.0 GridView control. You can reuse part of the code that the designer has already written.

It will be necessary to perform the following tasks:

Add a GridView control to the web page.
Add a SQLDataSource control to the web page and assign it to the GridView.
Move the table’s style info into the GridView.
Remove the original table.
Complete the code to populate the GridView.

Steps 1 through 4 can be summarized with html-like pattern syntax in the following way:

Original code:

<table id="productList" {Table tag attributes} style="{Table style values}">
   <tr style="{Row 1 style values}">
      {Sample data 1}
   </tr>
   <tr style="{Row 2 style values}">
      {Sample data 2}
   </tr>
   ...
</table>

Final code:

<asp:GridView ID="productList" runat="server" DataSourceID="SqlDataSource1"
   {Conversion of Table tag attributes} Style="{Table style values}">
   <RowStyle {Conversion of Row 1 style values} />
   <AlternatingRowStyle {Conversion of Row 2 style values} />
</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
   DataSourceMode="DataReader"
   ConnectionString="<%$ ConnectionStrings:MyDatabase%>"
   SelectCommand="SELECT Column1, Column2,... FROM MyTable"/>

In this sample, curly brackets indicate a collection of html attributes or elements, these collections are reused in the final code in their original form or converted to the corresponding AS.NET tag attributes.