how to make Responsive DataList asp.net

Question

I have an Asp.net DataList control in my page. It is currently having repeatcolumns set to 4 which will give me 4 columns in each row. But I want to make this responsive and set the value to 1 for smaller screen sizes. Below is my asp.net control:

<asp:DataList runat="server" RepeatDirection="Horizontal" RepeatColumns="4" ID="dd" class="vex-res">

How can I achieve this?

What have you tried so far ? You're supposed to post code. All you've posted is an ASP.NET usercontrol declaration — sh1rts, Apr 10 '14 at 00:26

score 8 · Accepted Answer · answered Apr 10 '14 at 00:39

8

You cannot make DataList to be responsive, because it renders as Table.

Instead, you need to use ListView with bootstrap (or some other responsive framework).

<asp:ListView ID="ListView1" runat="server" ...>
    ...
    <ItemTemplate>
        <div class="row">
            <div class="col-md-4"><%# Eval("Name") %></div>
            <div class="col-md-4"><%# Eval("Email") %></div>
            <div class="col-md-4"><%# Eval("Address") %></div>
        </div>
    </ItemTemplate>
</asp:ListView>

answered Apr 10 '14 at 00:39

Win

61,100
13
102
181

2

How do you make this repeat horizontally like the datalist? – Simon Oct 27 '15 at 21:10
@SimonTindall You just need to style it with CSS. If you need more information, could you please create a new question and post your code? – Win Oct 27 '15 at 21:43

score 6 · Answer 2 · edited Apr 22 '16 at 22:23

This Work My Home :

<asp:DataList ID="dlCustomers" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" CssClass="row">
    <ItemTemplate>
   <%-- <div class="row">--%>
    <div class="col-sm-4"><!--THUMBNAIL#2-->
    <div class="panel-body">
      <span class="label label-warning"><%# Eval("status")%></span>
      <div class="thumbnail label-success">
        <asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/" +Eval("image1").ToString().Trim() %>' Width="150px" Height="150px" />
        <div class="caption"><h4>Rp.<small> <%# Eval("harga")%></small></h4>
          <strong><%# Eval("judul") %></strong>
          <p>
          <small>LT:<strong>  <%# Eval("luastanah")%> m2</strong> </small> <small> LB : <strong>  <%# Eval("luasbangunan")%> m2</strong> </small> 
          <small>Setifikat : <strong><%# Eval("sertifikasi")%></strong> </small> <br />
         <small> Kamar : <strong><%# Eval("kamartidur")%></strong> </small><br />
         <small> Kamar Mandi : <strong><%# Eval("kamarmandi")%></strong> </small>
          </p>
          <a href="#" class="btn btn-success">Lihat Details</a>
        </div>
      </div>
     </div>
     </div> 
      <%--</div>--%>
      </ItemTemplate>
</asp:DataList>

Responsive using bootstrap 3.3.6 ..

The OP got an answer 2 years ago, why post this now? – Kaspar Lee Apr 22 '16 at 09:40 — Kaspar Lee, Apr 22 '16 at 09:40
Awesome, it Helped A lot – Anaximandro Andrade Oct 14 '16 at 00:57 — Anaximandro Andrade, Oct 14 '16 at 00:57

score 3 · Answer 3 · edited May 23 '17 at 11:54

Coming to this a little late but I found an asp:repeater works well and no additional CSS is required to get the layout repeating horizontally.

    <div class="container">
        <div class="row">
            <asp:Repeater ID="myRepeater" runat="server" DataSourceID="myDataSourceID">
                <ItemTemplate>
                    <div class="col-sm-4">
                        <%# Eval("itemID")%><br />
                        <%# Eval("itmName")%>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>

I realise that this will result in the total columns in one row adding up to more than 12 but as this will just wrap to the line underneath it shouldn't really matter.

Reference: https://stackoverflow.com/questions/23502342/bootstrap-3-grid-does-it-really-matter-how-many-columns-are-in-a-row

score 2 · Answer 4 · answered Nov 12 '15 at 17:51

2

You can also try setting RepeatLayout="Flow". That will cause your datalist to render as a series of <div> elements, which will behave more responsively.

answered Nov 12 '15 at 17:51

Shraps

43
5

score 1 · Answer 5 · answered Oct 27 '16 at 19:08

<asp:DataList ID="DataList1" runat="server"  OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
        <ItemTemplate>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Name") %></div>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Email") %></div>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Address") %></div>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Phone") %></div>
        </ItemTemplate>
    </asp:DataList>

Please use English. And it is normally good form to put your explanation of your answer actually **in** the answer. — ouflak, Oct 27 '16 at 19:35

score 0 · Answer 6 · answered Oct 27 '16 at 19:25

    <asp:DataList ID="uxPosts" runat="server"  OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
        <ItemTemplate>

            <a id="uxLink" runat="server" class="txt_link">
                <div class="col-xs-4 col-sm-4 col-md-4  " style="text-align:center;" >
                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>  
                </div>

                <div class="col-xs-4 col-sm-4 col-md-4  " style="text-align:center;" >
                    <asp:Label ID="Label1" runat="server"  Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>  
                </div>

                <div class="col-xs-4 col-sm-4 col-md-4  " style="text-align:center;" >
                    <asp:Label ID="Label4" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>  
                </div>
            </a>

        </ItemTemplate>

    </asp:DataList>

Achal Urankar · Answer 7 · 2021-01-22T06:51:37.927

You can do it with asp literal, write the code in the string and add it to literal, suppose you want to show items dynamically you can do it this way

Add html

<div class="any_css_class">
     <div class="any_css_class2">
         <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    </div>
</div>

and in your cs file

string htmlcode = ""; //code you want in your html
foreach (FetchedDetails fd in yourListOfItems)
{
    htmlcode += "<div class='content content-1' onclick=\"dosomething('" + fd.itemId + "')\"> " +
                    "<div class='fab fa-any_icon'></div> " +
                    "<h2>" + fd.anyAttribute + "</h2> ";
}

Literal1.Text = htmlcode; //add code to literal

This will do it. It will be responsive but you have to define your css properly :)

score -3 · Answer 8 · answered Oct 27 '16 at 18:57

  <asp:DataList ID="uxPosts" runat="server"  OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
        <ItemTemplate>
            <a id="uxLink" runat="server" class="txt_link">
                <div class=" col-xs-6 col-sm-4 col-md-3 col-lg-3  " style="text-align:center;" >
                    <div class="pnlborde">
                        <div class="encabezadofondo">
                            <asp:Label ID="Label2" runat="server" Height="38px" width="150px" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>  
                        </div>

                        <br />
                        <asp:Image ID="uxImage" runat="server" width="65%"  Height="90%" align="center" />
                        <br /><br />
                    </div>
                    <br />
                </div>
            </a>
        </ItemTemplate>
    </asp:DataList>

how to make Responsive DataList asp.net

8 Answers8

Linked