Then you need to set RepeatColumns property of DataList based on window width.
You can do it by calling page base method using jquery ones Page get loads also if it gets resize from browsers.
Here i added one button which is hidden on page and assigned onclick event to where it sets RepeatColumns property of DataList using Hidden field value.
Hidden field value gets sets on basis of window size also when we resize window. Refer the below sample for understanding and implement it in your code by your own logic as per your requirement.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(document).ready(function () {
// create local storage or check if local storage if not null then remove already exist
// Null checking you need to make because only ones you need to call it
if (localStorage.getItem('windowSizeratio') != null) {
localStorage.removeItem('windowSizeratio');
} else {
// Assign ratio value as per your resize window setting
var value = "0";
if ($(this).width() > 0 && $(this).width() <= 540) {
value = "540";
}
else if ($(this).width() > 540 && $(this).width() <= 980) {
value = "980";
} else if ($(this).width() > 980) {
value = "981";
}
//Assign localstorage value
localStorage.setItem('windowSizeratio', value);
}
// Call this function which will set hidden field value also it will call the button click event.
resize($(this).width());
});
window.onresize = function (event) {
// On resize window function will get call
resize($(this).width());
};
function resize(width) {
//Assign localstorage value to variable if it exist else it will undefined
var ratio = localStorage.getItem('windowSizeratio');
//Check the width also you need to check it’s not in same ratio which was it before
//So it will not call repeatedly for many times as infinite by checking ratio value which assigned from local storage.
//And assign hidden field value and call the buttonclick event from jquery fuction so it will set the RepeatColumns value.
if (width > 0 && width <= 540 && ratio != "540" && $("[id*=hfColumnRepeat]").val() != "2") {
$("[id*=hfColumnRepeat]").val(2);
$("[id*=btnfake]").click();
}
else if (width > 540 && width <= 980 && ratio != "980" && $("[id*=hfColumnRepeat]").val() != "3") {
$("[id*=hfColumnRepeat]").val(3);
$("[id*=btnfake]").click();
}
else if (width > 980 && ratio != "981" && $("[id*=hfColumnRepeat]").val() != "5") {
$("[id*=hfColumnRepeat]").val(5);
$("[id*=btnfake]").click();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<%-- Fake button just for call onClick of button event using jquery function--%>
<asp:Button ID="btnfake" runat="server" OnClick="OnClick" Style="display: none" />
<%-- Hidden filed to set the ratio value--%>
<asp:HiddenField ID="hfColumnRepeat" runat="server" Value="5" />
<asp:DataList ID="dlCustomers" runat="server" CellSpacing="3" RepeatColumns="5">
<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>
<br />
<br />
<br />
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.PopulateDataList();
}
}
protected void OnClick(object sender, EventArgs e)
{
int repeatcolumn = Convert.ToInt32(hfColumnRepeat.Value);
this.RsetepeatColumns(repeatcolumn);
}
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();
}
private void RsetepeatColumns(int repeatcolumn = 5)
{
dlCustomers.RepeatColumns = repeatcolumn;
}
ScreenShot
