In ASP.Net 2.0, Repeater Control ItemTemplate layout can be managed using CSS based Div layout. You can use Div float styles to display the data items retrieved from the SQL Database similar to Table layout as we discussed in the previous article about ASP.Net Repeater Table. Here we will use CSS style properties and HTML Div tag to provide the customized structure and layout to display the data items of Repeater Control placed inside the ItemTemplate. There is again no change in C# code for DataBinding with Repeater Control but you have to manage and check the Div float based CSS style layout in different web browsers. Coz each web browser displays the Div layout in different manner, sometimes floating div collapses in FireFox or new version of IE.
<style type="text/css">
body {
font-family:arial; font-size:12px
}
.outer {
border: solid 1px #c0c0c0; width:500px; padding:2px;
.inner {
float:left; width:100%;
.innerTitle {
float:left; width:100px;
.innerContent {
float:left;
.clear {
clear:both;
</style>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="inner">
<div class="innerTitle">
<b>Category:</b></div>
<div class="innerContent">
</div>
<div class="clear"></div>
<b>Description:</b></div>
</ItemTemplate>
<SeparatorTemplate>
<hr style="color:#c0c0c0" noshade="noshade" />
</asp:Repeater>
You can download the C# source code for ASP.Net Repeater Control with Div Layout Here:
repeater-div.zip (2.74 kb)
Or
See the C# code in Repeater Control Databinding tutorial
Be the first to rate this post
Tags: asp.net 2.0, c#, asp.net repeater control, asp.net repeater div, c# code, asp.net repeater databinding, asp.net sample, asp.net sql connectionstring, asp.net repeater dynamic, asp.net nested repeater, asp.net repeater table, c# repeater div layout, web.config connectionstrings
10/11/2008 3:27:20 AM
