Display multiple records per row with Datalist control in asp.net (C#, VB)

Introduction: In this article today I will explain how we can display multiple records per row with Datalist control in asp.net (C#, VB)

Description:

In the previous article I have explained Freeze the Gridview header using Jquery in asp.net,  Send email tomultiple users selected in gridview using asp.net (C#, VB) and  Take automaticsnapshot (screenshot) and email it using asp.net (C#, VB).

We can customize the Datalist layout through its RepeatColumns and RepeatDirection properties.  In this example I want to display 4 records in a row with horizontal direction (Left to right).

Drag and the drop the Datalist control from toolbox to webform and designed the webform as shown below: 

HTML Markup of Webform: 

<fieldset style="width:53%">

    <legend>Repeat Cloumns in Datalist</legend>

    <asp:DataList ID="dlemp" runat="server" CellPadding="5" RepeatColumns="4"

           CellSpacing="5" RepeatDirection=" Horizontal">

           <HeaderStyle VerticalAlign="Middle" Font-Size="20PX" BackColor="Black" ForeColor="White" />

      <HeaderTemplate> 

      Employees Details  

      </HeaderTemplate>

    <ItemTemplate>

      <asp:Image ID="imgEmp" runat="server" Width="100px" Height="80px" ImageUrl='<%# Eval("image") %>' style="padding-left:20px"/><br />

     <b>Employee Name: </b>             

                <asp:Label ID="lblename" runat="server" Text='<%# Eval("Emp_Name") %>'></asp:Label> <br />

                <b>Employee Salary:</b>

                <asp:Label style="text-align:justify" ID="lblesalary" runat="server" Text='<%# Eval("emp_salary") %>'></asp:Label><br />

           <b>Employee City: </b> <asp:Label ID="lblCity" runat="server" Text=' <%# Eval("emp_Adress") %>'></asp:Label>

               </ItemTemplate>

               <FooterTemplate>        

               </FooterTemplate>

    </asp:DataList>

    </fieldset>

C# Code: 

using System.Data.SqlClient;

using System.Data;

using System.Configuration;

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            BindDatalist();

        }

    }

    public void BindDatalist()

    {

        SqlDataAdapter adp = new SqlDataAdapter("Select * from employee", con);

        DataTable dt = new DataTable();

        adp.Fill(dt);

        if (dt.Rows.Count > 0)

        {

            dlemp.DataSource = dt;

            dlemp.DataBind();

        }

    }

  

VB code: 

Imports System.Data

Imports System.Data.Sql

Imports System.Configuration

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())

    Protected Sub Page_Load(sender As Object, e As EventArgs)

        If Not IsPostBack Then

            BindDatalist()

        End If

    End Sub

    Public Sub BindDatalist()

        Dim adp As New SqlDataAdapter("Select * from employee", con)

        Dim dt As New DataTable()

        adp.Fill(dt)

        If dt.Rows.Count > 0 Then

            dlemp.DataSource = dt

            dlemp.DataBind()

        End If

    End Sub

Is this article helpful for you?

If yes post your comment to appreciate my work and fell free to contact me. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.