Customizing the Display of Data

The Data in the Table is as follows: 

 

Question:  

How to display the Data as given below:

Solution:

To get the functionality of displaying the data in a repetitive manner we will need a Datalist. The RepeatColumns Property of the DataList allows us to specify the number of columns to be repeated.

The column Title has duplicate Records like "Sales Representative", "Sales Manager".....To avoid the Title Columns to be repeated one way to to manipulate the data is using the SortedList (a class in the System.Collections namespace). This class is a collection of Key and Value pair. So we can check for if the value Exists and accordingly discard the value for the duplicate data.

Step 1:

So in webform1.aspx we'll have:

<asp:datalist id="DataList1" runat="server" ItemStyle-VerticalAlign="Top" RepeatColumns="4" Width="100%"><ItemTemplate>
<asp:Label ID="lbl1" Runat="server" Font-Bold="true" Font-Size="10pt">
<%# Container.DataItem%></asp:Label>
<asp:label id="lblETitle" Visible="False" runat="Server"
Text='<%#Container.DataItem%>' />
<hr>
....
</ItemTemplate>
</asp:datalist>

In webform1.asp.vb

To display the Title Column as Header. We write as follows

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
BindTitle()
End If
End Sub
Sub BindTitle()
Dim ds As New DataSet
Dim sqlStmt As String = "SELECT * FROM Employees"
Dim conString As String = "server=localhost;database=Northwind;uid=sa;pwd=;"
Dim myda As SqlDataAdapter = New SqlDataAdapter(sqlStmt, conString)
myda.Fill(ds, "Table")
Dim slist As SortedList = New SortedList
Dim i As Integer
Dim dr As DataRow
For Each dr In ds.Tables(0).Rows
If Not slist.ContainsValue(dr("Title")) Then
slist.Add(dr("Employeeid"), dr("Title"))
End If
Next
DataList1.DataSource = slist.GetValueList
DataList1.DataBind()
End Sub

Step 2:

To display all the Employees for the Specific Title add a DataGrid within the DataList.

<asp:datalist id="DataList1" runat="server" ItemStyle-VerticalAlign="Top" RepeatColumns="4" Width="100%">
<ItemTemplate>
...
<asp:DataGrid runat="server" id="Datagrid1" AutoGenerateColumns="False"
Font-Name="Verdana" Font-Size="10pt" ShowHeader="false"
ItemStyle-Font-Size="10pt" ItemStyle-Font-Name="verdana" BorderWidth="0" CellPadding="0" CellSpacing="0">
<Columns>
<asp:TemplateColumn HeaderText="Name">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem , "LastName")%>,<%#DataBinder.Eval(Container.DataItem , "FirstName")%>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
...
</ItemTemplate>
</asp:datalist>

In code behind

Function getEmp(ByVal title As String) As DataSet
Dim ds As New DataSet
Dim sqlStmt As String = "SELECT * FROM Employees where title=" & "'" & title & "'"
Dim conString As String = "server=localhost;database=Northwind;uid=sa;pwd=;"
Dim myda As SqlDataAdapter = New SqlDataAdapter(sqlStmt, conString)
myda.Fill(ds, "Table")
Return ds
End Function

Private Sub DataList1_ItemDataBound(ByVal sender As Object, _ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles DataList1.ItemDataBound
Dim Titlelabel As Label = e.Item.FindControl("lblETitle")
Dim strEmpTitle As String = Titlelabel.Text
CType(e.Item.FindControl("Datagrid1"), DataGrid).DataSource = getEmp
strEmpTitle)
CType(e.Item.FindControl("Datagrid1"), DataGrid).DataBind()
End Sub

That all needed to run the code!!!!