Sir the below code is showing data perfectly but the style is too simpleCan you please review it make better visual effect on page something Professionalltdiv class34row34gt ltdiv class34colxs12 collgoffset234gt ltdiv class34boxbody34gt ltaspDataList ID34memberDataList34 RepeatDirection34Horizontal34 runat34server34 RepeatColumns34434 CellSpacing342034 CellPadding342

Hi MehramRefer below sampleHTMLltaspDataList ID34dlMembers34 runat34server34 RepeatDirection34Horizontal34 RepeatLayout34Table34 RepeatColumns34234 BackColor34Window34gt ltItemTemplategt ltdivgt ltdiv style34float left34gt ltaspImage ID34lblImage34 runat34server34 Width345034 Height345034 ImageUrl39ltEval34Image34gt39 Style34borderradius 5034 gt ltdivgt ltdiv style34float left paddingleft 10px width150px34gt ltdivgt ltaspLabel ID34lblId34 runat34server34 Text39ltEval34Id34gt39 FontBold34true34gtltaspLabelgt lthr gt ltdivgt ltdivgt ltaspLabel ID34lblName34 runat34server34 Text39l

Apply CSS to DIV inside the ASP.Net DataList

Mehram

SOLVED CLOSED ACTIVE ANSWERED
User: Mehram
Posted: on Jun 19, 2022 11:02 PM
Forum: Data Controls
Answer: 1
Views: 4487

Sir the below code is showing data perfectly, but the style is too simple.

Can you please re-view it make better visual effect on page something Professional.

<div class="row">
    <div class="col-xs-12  col-lg-offset-2">
        <div class="box-body">
               <asp:DataList ID="memberDataList" RepeatDirection="Horizontal" runat="server" RepeatColumns="4" CellSpacing="20"
                    CellPadding="2" RepeatLayout="Table"
                        DataKeyField="MemberId" BorderWidth="10" GridLines="Both"   BackColor="Window" >
                <ItemTemplate>
                    <table class="table table-responsive ">
                        <tr style="text-align:left;">
                            <td rowspan="3">
                                  <asp:Image ID="lblImage" runat="server" CssClass="img-circle" Width="60px" hight="60px"
                                      ImageUrl='<%#DataBinder.Eval(Container.DataItem, "PicPath1")%>'   />
                            </td>
                            <td style="text-align: left; vertical-align:bottom; padding-right: 0px; padding-bottom:0px; font-size:12px;">
                                <asp:LinkButton ID="lblID" runat="server" CommandName="Select" CommandArgument='<%# Eval("MemberID")%>'
                                 Text='<%# Bind("MemberShipNo")%>' OnClick="lnkEdit_Click" Font-Bold="true"   ></asp:LinkButton>
                            </td>
                            <td style="text-align: right; vertical-align:bottom; padding-right: 0px; padding-bottom:0px;">
                                <asp:Label runat="server" ID="lblMemberAge" Text='<%#Eval("Age181")%>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align: left; vertical-align:bottom; padding-right: 0px; padding-bottom:0px;">
                                <asp:Label runat="server" ID="lblMemberName" Text='<%#Eval("MemberName")%>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align: left; vertical-align:bottom; padding-right: 0px; padding-bottom:0px;">
                                <asp:Label runat="server" ID="lblMemberFamilyName" CssClass="name" Text='<%#Eval("MemberFamilyName")%>'></asp:Label>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>
        </div>
    </div>
</div>

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Jun 22, 2022 03:08 AM
Report

Hi Mehram,

Refer below sample.

HTML

<asp:DataList ID="dlMembers" runat="server" RepeatDirection="Horizontal" RepeatLayout="Table" RepeatColumns="2" BackColor="Window">
    <ItemTemplate>
        <div>
            <div style="float: left;">
                <asp:Image ID="lblImage" runat="server" Width="50" Height="50" ImageUrl='<%#Eval("Image")%>' Style="border-radius: 50%;" />
            </div>
            <div style="float: left; padding-left: 10px; width:150px;">
                <div>
                    <asp:Label ID="lblId" runat="server" Text='<%#Eval("Id")%>' Font-Bold="true"></asp:Label>
                    <hr />
                </div>
                <div>
                    <asp:Label ID="lblName" runat="server" Text='<%#Eval("Name")%>' Font-Bold="true"></asp:Label>
                    <hr />
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:DataList>

Namespaces

using System.Data;

VB.Net

Imports System.Data

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindDataList();
    }
}

private void BindDataList()
{
    using (DataTable dt = new DataTable())
    {
        dt.Columns.AddRange(new DataColumn[3] {
                            new DataColumn("Id"),
                            new DataColumn("Name"),
                            new DataColumn("Image") });
        dt.Rows.Add(1, "Koala", "Images/Koala.jpg");
        dt.Rows.Add(2, "Jellyfish", "Images/Jellyfish.jpg");
        dt.Rows.Add(3, "Desert", "Images/Desert.jpg");
        dt.Rows.Add(4, "Penguins", "Images/Penguins.jpg");
        dlMembers.DataSource = dt;
        dlMembers.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindDataList()
    End If
End Sub

Private Sub BindDataList()
    Using dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {
                            New DataColumn("Id"),
                            New DataColumn("Name"),
                            New DataColumn("Image")})
        dt.Rows.Add(1, "Koala", "Images/Koala.jpg")
        dt.Rows.Add(2, "Jellyfish", "Images/Jellyfish.jpg")
        dt.Rows.Add(3, "Desert", "Images/Desert.jpg")
        dt.Rows.Add(4, "Penguins", "Images/Penguins.jpg")
        dlMembers.DataSource = dt
        dlMembers.DataBind()
    End Using
End Sub

Screenshot

Apply CSS to DIV inside the ASP.Net DataList

Company

Explore

Follow us

Contact Us