Merge data in a table into one cell - asp.net

Question

I try to load a table from database and I want to merge data in each column into separate cells. This is following table:
Column A
Column B
Column C
Column D
Cell a1
Cell b1
Cell c1
Cell d1
NULL
Cell b2
Cell c2
NULL
NULL
NULL
Cell c3
NULL
And this is output required
Column A
Column B
Column C
Column D
Cell a1
Cell b1 Cell b2
Cell c1 Cell c2 Cell c3
Cell d1
This is my code to load table in file VB:
Private Sub LOAD_TABLE (ByVal iID As Integer)
Dim cmd As New SqlCommand("LOAD_TB")
Dim s As String = ""
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.Add("#ID", SqlDbType.Int).Value = iID
cmd.Parameters.Add("#T", SqlDbType.Int).Value = DrListT.SelectedValue
cmd.Parameters.Add("#N", SqlDbType.Int).Value = DrListN.SelectedValue
Using con As New SqlConnection(Class_pub.conString)
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using dt As New DataTable
sda.Fill(dt)
GRV_H.DataSource = dt
GRV_H.DataBind()
End Using
End Using
If con.State = ConnectionState.Open Then
con.Close()
con.Dispose()
End If
End Using
End Sub
And the code to display table in file ASPX:
<asp:GridView ID="GRV_H" DataKeyNames="ID" AutoGenerateColumns="False" runat="server"
AllowPaging="False" Width="100%">
<AlternatingRowStyle BackColor="#FCFCFC" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<input id="id1" type="text" name="txt1" style="width: 80px; font-family: Arial"
class="textbox_numeric" value='<%# Eval("ColumnA", "{0:#,##0}") %>' onkeyup="this.value=FormatNumber(this.value);"
onclick="return this.focus();" onfocus="this.select();"
autocomplete="Off" runat="server" />
</ItemTemplate>
<HeaderTemplate>
Column A</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="60px" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<input id="id2" type="text" name="txt2" style="width: 80px; font-family: Arial"
class="textbox_numeric" value='<%# Eval("ColumnB", "{0:#,##0}") %>' onkeyup="this.value=FormatNumber(this.value);"
onclick="return this.focus();" onfocus="this.select();"
autocomplete="Off" runat="server" />
</ItemTemplate>
<HeaderTemplate>
Column B</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="60px" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<input id="id3" type="text" name="txt3" style="width: 75px; font-family: Arial"
class="textbox_numeric" value='<%# Eval("ColumnC", "{0:#,##0}") %>' readonly="readonly" onclick="return this.focus();" onfocus="this.select();"
autocomplete="Off" runat="server" />
</ItemTemplate>
<HeaderTemplate>
Column C</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="75px" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<input id="id4" type="text" name="txt4" style="width: 60px; font-family: Arial"
class="textbox_numeric" value='<%# Eval("ColumnD", "{0:#,##0}") %>' onkeyup="this.value=FormatNumber(this.value);"
onchange="" onclick="return this.focus();" onfocus="this.select();" autocomplete="Off"
runat="server" />
</ItemTemplate>
<HeaderTemplate>
Column D</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="60px" />
</asp:TemplateField>
</Columns>
<HeaderStyle CssClass="style_header_Grid" />
<RowStyle CssClass="style_item_Grid" />
<PagerStyle CssClass="style_header_Grid" Font-Bold="true" />
</asp:GridView>
I didn't find solution because my english not good to call or describe problem.

Answer 1

Ok, the way to "apporach" this logic and problem?
Process data at the table level in code, and NOT from the gridview (which is for display of data.
So Logic:
Load the data into a table.
Create a 2nd table, and process above rows into ONE row in this 2nd table.
Send 2nd table to GridView.
So, say this markup
<asp:Button ID="Button1" runat="server" Text="Load Grid" CssClass="btn"
OnClick="Button1_Click"
/>
<br />
<br />
<h3>Original table data</h3>
<asp:GridView ID="GridView1" runat="server" CssClass="table"
Width="30%" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="LastName"/>
<asp:BoundField DataField="City"/>
<asp:BoundField DataField="HotelName"/>
</Columns>
</asp:GridView>
<br />
<h3>Crunched table data</h3>
<asp:GridView ID="GridView2" runat="server" CssClass="table"
Width="30%" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="LastName" HtmlEncode="False" />
<asp:BoundField DataField="City" HtmlEncode="False" />
<asp:BoundField DataField="HotelName" HtmlEncode="False" />
</Columns>
</asp:GridView>
And code to load and process would be this:
Protected Sub Button1_Click(sender As Object, e As EventArgs)
Dim strSQL As String =
"SELECT LastName, City, HotelName FROM tblHotels
WHERE ID IN (127, 120, 124)"
Using conn As New SqlConnection(My.Settings.TEST4)
Using cmdSQL As New SqlCommand(strSQL, conn)
Dim rstSource As New DataTable
Dim rstCrunched As New DataTable
conn.Open()
rstSource.Load(cmdSQL.ExecuteReader)
GridView1.DataSource = rstSource ' show origional data
GridView1.DataBind()
For Each MyColumn In rstSource.Columns
rstCrunched.Columns.Add(MyColumn.ColumnName)
Next
Dim ResultRow As DataRow = rstCrunched.NewRow
For Each OneRow As DataRow In rstSource.Rows
For Each MyColumn As DataColumn In rstSource.Columns
If ResultRow(MyColumn.ColumnName).ToString <> "" Then
ResultRow(MyColumn.ColumnName) &= "<br/>"
End If
ResultRow(MyColumn.ColumnName) &= OneRow(MyColumn.ColumnName)
Next
Next
rstCrunched.Rows.Add(ResultRow)
GridView2.DataSource = rstCrunched ' show crunched data
GridView2.DataBind()
End Using
End Using
End Sub
And result is this when button clicked
However, there is a LOT of issues here.
If you using bound fields, then above HtmlEncode="False" is required.
however, if you using lables, (in templated column), then again above is fine.
If you using text boxes, then this:
ResultRow(MyColumn.ColumnName) &= vbCrLf
So, either way, pre-processing of the data is quite much the road to take.