How do I transpose ASP.NET ListView grid layout? - asp.net

Question

I'm new to ASP.NET and am trying to create a repeating detailsview type format. By this I mean that the first column is a header type column and subsequent columns are the data records.
Records Rec1 Rec 2 Rec3
Header A Fld A Fld A Fld A
Header B Fld B Fld B Fld B
I've tried a couple iterations of the following based on this example:
<asp:ListView ID="ListView2" runat="server" DataKeyNames="FldA" DataSourceID="EntityRecordSource" GroupItemCount="3">
<LayoutTemplate>
<table id="Table1" runat="server">
<tr id="Tr21" runat="server">
<td id="Td1" runat="server">
<table id="Table2" runat="server" border="0" style="">
<tr id="Tr1" runat="server" style="">
<th id="Th1" runat="server"></th>
</tr>
<tr id="Tr2" runat="server" style="">
<th id="Th2" runat="server">FldA</th>
</tr>
<tr id="Tr3" runat="server" style="">
<th id="Th3" runat="server">FldB</th>
</tr>
<tr id="Tr4" runat="server" style="">
<th id="Th4" runat="server">FldC</th>
</tr>
</table>
</td>
<td>
<table>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
</table>
</td>
</tr>
<tr id="Tr22" runat="server">
<td id="Td2" runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
<GroupTemplate >
<tr id="Tr1" runat="server" style="">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
<tr id="Tr2" runat="server" style="">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder2"></asp:PlaceHolder>
</tr>
<tr id="Tr3" runat="server" style="">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder3"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<asp:Label ID="FldALabel" runat="server" Text='<%# Eval("FldA") %>' />
</td>
<td>
<asp:Label ID="FldBLabel" runat="server" Text='<%# Eval("FldB") %>' />
</td>
<td>
<asp:Label ID="FldCLabel" runat="server" Text='<%# Eval("FldC") %>' />
</td>
</ItemTemplate>
</asp:ListView>
However this results in an error stating :
System.Web.UI.HtmlControls.HtmlTableCellCollection must have items of type 'System.Web.UI.HtmlControls.HtmlTableCell'. 'asp:PlaceHolder' is of type 'System.Web.UI.WebControls.PlaceHolder'.
Thanks in advance for your help.

Answer 1

I wanted basically the same thing, here is the method I wrote to accomplish this:
internal static void TransposeListview(ListView lv)
{
if (lv.Items.Count == 0)
throw new ArgumentException("ListView has no items, so values cannot be transposed.", "lv");
// first, convert the column headers into a first row
var columnHeaderValues = (from ColumnHeader ch in lv.Columns select ch.Text).ToArray();
lv.Items.Insert(0, new ListViewItem(columnHeaderValues, 0));
var cols = lv.Columns.Count;
var rows = lv.Items.Count;
// create a list of ListViewSubItem arrays, to hold the target values
var lvsiArrayList = new List<ListViewItem.ListViewSubItem[]>();
for (var i = 0; i <= cols - 1; i++)
{
var lvsiArray = new ListViewItem.ListViewSubItem[rows];
for (var j = 0; j <= rows - 1; j++)
lvsiArray[j] = lv.Items[j].SubItems[i];
lvsiArrayList.Add(lvsiArray);
}
// now clear the whole ListView, and create the items and subitems using flipped row/column indexes
lv.Clear();
foreach (var lvsiArray in lvsiArrayList)
lv.Items.Add(new ListViewItem(lvsiArray, 0));
// last, convert the first row into column headers
columnHeaderValues = (from ListViewItem.ListViewSubItem lvsi in lv.Items[0].SubItems select lvsi.Text).ToArray();
for (var j = 0; j <= rows - 1; j++)
lv.Columns.Add(columnHeaderValues[j]);
lv.Items.RemoveAt(0);
}