| Member name | Description |
|---|
| Flow |
Items are displayed without a table structure. Rendered markup consists of a span element and items are separated by br elements.
|
| OrderedList |
Items are displayed without a table structure. Rendered markup consists of an ol element that contains li elements.
|
| Table |
Items are displayed in a table.
|
| UnorderedList |
Items are displayed without a table structure. Rendered markup consists of a ul element that contains li elements.
|
For Repeatlayout refer above information how it will render the DataList content depending on value assigned. Also refer the below link for your understanding.
https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeatlayout%28v=vs.110%29.aspx
https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datalist.repeatcolumns%28v=vs.110%29.aspx
It will either render data in one row value or single column value as per the RepeatDirection value assigned.
You can use bootstrap to make responsive DataList when you resize the DataList.
Check the below code for your reference.
HTML
<asp:DataList ID="dlCustomers" runat="server" CellSpacing="3" RepeatColumns="3">
<ItemTemplate>
<div class="row">
<div class="col-sm-12 ">
<div class="col-sm-12">
<b>
<%# Eval("ContactName") %></b>
</div>
<div class="col-sm-12">
<%# Eval("City") %>,
<%# Eval("PostalCode") %><br />
<%# Eval("Country")%>
</div>
<div class="col-sm-6">
Phone:
</div>
<div class="col-sm-6">
<%# Eval("Phone")%>
</div>
<div class="col-sm-6">
Fax:
</div>
<div class="col-sm-6">
<%# Eval("Fax")%>
</div>
</div>
</div>
</ItemTemplate>
</asp:DataList>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.PopulateDataList();
}
}
private void PopulateDataList()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[6]{ new DataColumn("ContactName", typeof(string))
,new DataColumn("City", typeof(string))
,new DataColumn("PostalCode", typeof(string))
,new DataColumn("Country", typeof(string))
,new DataColumn("Phone", typeof(string))
,new DataColumn("Fax", typeof(string))
});
dt.Rows.Add("Mudassar Khan", "Warszawa", "01-012", "Belgium", "(26) 642-7012", "(26) 642-7012");
dt.Rows.Add("Maria", "Boise", "12209", "Austria", "030-0074321", "030-0076545");
dt.Rows.Add("Ana Trujillo", "México D.F.", "05021", "France", "(5) 555-4729", "5) 555-3745");
dt.Rows.Add("Antonio Moreno", "Montréal", "05023", "Brazil", "(5) 555-3932", "");
dt.Rows.Add("Thomas Hardy", "Mannheim", "WA1 1DP", "Ireland", "(171) 555-7788", "(171) 555-6750");
dt.Rows.Add("Christina Berglund", "Luleå", "S-958 22", "Italy", "0921-12 34 65", "0921-12 34 67");
dt.Rows.Add("Hanna Moos", "Mannheim", "68306", "Finland", "0621-08460", "0621-08924");
dt.Rows.Add("Frédérique Citeaux", "Strasbourg", "67000", "Finland", "88.60.15.31", "88.60.15.32");
dt.Rows.Add("Martín Sommer", "Madrid", "28023", "Argentina", "(91) 555 22 82", "(91) 555 91 99");
dlCustomers.DataSource = dt;
dlCustomers.DataBind();
}
Screenshot
But you cannot change its Repeatcolumn on resize of window as its get assigned to Datalist on design time or whenever it get bind DataList.
