Question

I realize this is a strange/simple question. I have HTML—tables and rows—that make up a grid. I need the resulting grid to look exactly like the HTML does, with data pulled from a DataTable.

How should I go about doing that? If I replace the HTML with a GridView the result will look different from what I need it to look like. Do I create a custom grid class that spits out tables and rows?

To clarify: I’ve been given an HTML grid…

<div>
    <table>
        <tr>
            <td>row 1 col 1</td>
            <td>row 1 col 2</td>
        </tr>
        <tr>
            <td>row 2 col 1</td>
            <td>row 2 col 2</td>
        </tr>
    </table>
</div>

…which I now need to populate with data from a table, and preserve the original HTML.

Answer 1

If you want to use ASP.Net databinding capabilities, go with a Repeater. The markup will look something like this:

<table>
    <thead>
         <tr>
             <th>Heading</th>
         </tr>
    </thead>
    <tbody>
         <asp:Repeater runat="server">
             <ItemTemplate>
                 <tr>
                     <td><%# Eval("SomeFieldName") %></td>
                 </tr>
             </ItemTemplate>
         </asp:Repeater>
    </tbody>
</table>

You can also build the markup manually in the code-behind by instantiating table/row/cell objects and adding them to the controls collection of the page, control, or parent container control. This tends to be time-consuming but it’s a valid option in some cases, such as when you wish to have highly dynamic content that isn’t easy to express in a Repeater.

A third option is to mix server markup with client markup, e.g.

<table>
    <thead>
         <tr>
             <th>Heading</th>
         </tr>
    </thead>
    <tbody>
         <% foreach( var obj in someCollection ){ %>
             <tr>
                 <td><%= obj.Property %></td>
             </tr>
         <% } %>
    </tbody>
</table>

The last option is quite similar (albeit more verbose) to Razor syntax used in ASP.Net MVC views.