ASP.Net Repeater Table

by top54u.com 14 Jul, 2008

ASP.Net 2.0 Repeater Control does not render HTML table while generating the list items inside the ItemTemplate retrieved from the SQL DataSource. You can take advantage of Repeater control’s iterative behavior of ItemTemplate to generate the Table rows repeatedly. This tutorial will help you to learn how to generate table layout of Repeater control data items to display the data in Tabular form similar to ASP.Net GridView Databound Control. In the C# code behind there is nothing special to bind the data with Repeater control but you have to manage the HTML layout of Repeater to render the valid HTML code for <tr> and <td> tags of Table placed inside the ItemTemplate. There must be paired HTML <tr> and <td> tags along with their closing </tr> and </td> tags.

 

HTML Source Code for ASP.Net Repeater Control with Table layout

 

<table cellpadding="2" cellspacing="0" width="500">

<asp:Repeater ID="Repeater1" runat="server">

<ItemTemplate>

<tr>

<td><b>Category:</b></td>

<td><%#DataBinder.Eval(Container.DataItem,"categoryName")

%></td>

</tr>

<tr>

<td><b>Description:</b></td>

<td><%# DataBinder.Eval(Container.DataItem,"description") %></td>

</tr>

</ItemTemplate>

<SeparatorTemplate>

<tr>

<td colspan="2"><hr noshade="noshade" /></td>

</tr>

</SeparatorTemplate> </asp:Repeater>

</table>

 

 

In the above HTML source for Repeater Control to render table rows and columns dynamically you can see that opening and closing tag for HTML <table> are placed outside the Repeater Control. ItemTemplate contains two <tr> tags to render two table rows. Both rows have two table cells created using <td> tag. SeparatorTemplate contains single row with single cell with colspan="2" having horizontal rule HTML <hr> tag to display a separation line between each ItemTemplate. Colspan attribute of <td> tag is used to create a single cell equivalent to two cells.

 

You can download the C# source code for ASP.Net Repeater Control with Table Layout Here:

repeater-table.zip (2.67 kb)

 

Or

See the C# code in Repeater Control Databinding tutorial.

Spotlight.....

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , , , , , , , , , ,

Comments

Add comment


(Will show your Gravatar icon)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

10/11/2008 3:36:00 AM




related videos.....
recent posts.....
top54u ezines.....