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)
Display multiple records per row with Datalist

Description:

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.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget