Make DataList Responsive using jQuery in ASP.Net

Hi arie.keren,

Please refer below sample.

You can also use listview and datalist .

HTML

<asp:ListView runat="server" ID="ListView1" ItemPlaceholderID="ItemPlaceHolder1">
    <LayoutTemplate>
        <div runat="server" id="ItemPlaceHolder1">
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <div style="float: left;">
            <asp:Image ID="Image1" ImageUrl='<%# Eval("ImageUrl") %>' runat="server" class="img-fluid"
                Height="100px" Width="100px" />
            <div style="background-color: #e4ddd3; height: 25px; font-size: 12px;">
                <asp:HyperLink ID="HyperLink1" runat="server" Font-Bold="true" Font-Size="Small"
                    ForeColor="Black" NavigateUrl='<%# DataBinder.Eval(Container.DataItem,"Id", "motor-honda-rinci.aspx?kode_motor={0}") %>'
                    Text='<%#Eval("Id") %>' />
            </div>
        </div>
    </ItemTemplate>
</asp:ListView>
<div style="clear: both;">
</div>
<asp:Panel runat="server" ID="Panel1">
    <asp:DataList runat="server" ID="DataList1" RepeatLayout="Flow">
        <ItemTemplate>
            <div style="float: left;">
                <asp:Image ID="Image1" runat="server" CssClass="imagesize" ImageUrl='<%# Eval("ImageUrl") %>' /></div>
            <div style="float: left;">
                <asp:HyperLink ID="HyperLink1" runat="server" Font-Bold="true" Font-Size="Small"
                    ForeColor="Black" NavigateUrl='<%# DataBinder.Eval(Container.DataItem,"Id", "motor-honda-rinci.aspx?kode_motor={0}") %>'
                    Text='<%#Eval("Id") %>' />
            </div>
        </ItemTemplate>
    </asp:DataList>
</asp:Panel>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("span br").remove();
    })
</script>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Id"), new DataColumn("ImageUrl") });
        dt.Rows.Add(1, "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg");
        dt.Rows.Add(2, "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg");
        dt.Rows.Add(3, "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg");
        dt.Rows.Add(4, "http://static.flickr.com/77/199481108_4359e6b971_s.jpg");
        dt.Rows.Add(5, "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg");
        dt.Rows.Add(6, "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg");
        dt.Rows.Add(7, "http://static.flickr.com/58/199481218_264ce20da0_s.jpg");
        dt.Rows.Add(8, "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg");
        dt.Rows.Add(9, "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg");
        dt.Rows.Add(10, "http://static.flickr.com/70/229228324_08223b70fa_s.jpg");
        this.ListView1.DataSource = dt;
        this.ListView1.DataBind();
        this.DataList1.DataSource = dt;
        this.DataList1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(1) {New DataColumn("Id"), New DataColumn("ImageUrl")})
        dt.Rows.Add(1, "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg")
        dt.Rows.Add(2, "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg")
        dt.Rows.Add(3, "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg")
        dt.Rows.Add(4, "http://static.flickr.com/77/199481108_4359e6b971_s.jpg")
        dt.Rows.Add(5, "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg")
        dt.Rows.Add(6, "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg")
        dt.Rows.Add(7, "http://static.flickr.com/58/199481218_264ce20da0_s.jpg")
        dt.Rows.Add(8, "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg")
        dt.Rows.Add(9, "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg")
        dt.Rows.Add(10, "http://static.flickr.com/70/229228324_08223b70fa_s.jpg")
        Me.ListView1.DataSource = dt
        Me.ListView1.DataBind()
        Me.DataList1.DataSource = dt
        Me.DataList1.DataBind()
    End If
End Sub

Screenshot