Listview Control column layout

[AG]

I would like to use the listview control to display data from a single field
in two columns with format of unordered list
<ul>
<li>data</li>
</ul>

I have found many examples of doing it with a table, but would like to have
the list bullets.

Can anyone point me to a sample?

Thanks,

 

[Allen Chen [MSFT]]

Hi AG,

My name is Allen Chen. It's my pleasure to work with you on this issue.

From your description you want to display one field in two columns and use
unordered list to display data.

To solve this problem I need to know the expected layout. Since it's not
given yet I'd like to provide solution based on my assumption first. See
below:

1. The layout is like this:

* Part one of Record1 Part two of Record1
* Part one of Record2 Part two of Record2
* Part one of Record3 Part two of Record3
....

If this is what you need I think you can try following code:

<asp:ListView ID="ListView1" runat="server"
DataSourceID="LinqDataSource1" >
<LayoutTemplate>
LayoutTemplate
<ul>
<asplaceHolder runat="server" ID="itemPlaceholder"></asplaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li>
<div style="width:500px;">
<div style="width:50%;float:left; background-color:Yellow">
<%#Eval("CompanyName") %> -1</div>
<div style="width:50%;float:right;background-color:Green">
<%#Eval("CompanyName") %> -2</div>
<div style='clear:both;'></div>
</div>

</li>
</ItemTemplate>
</asp:ListView>

To get the expected value you need you can replace <%#Eval("CompanyName")
%> -1 with <%#YourMethod(Eval("CompanyName")) %> and in code behind, define
YourMethod like this:

protected string YourMethod(object data)
{
//return the length of the data retrieved.
return "length is: " + data.ToString().Length;
}

2. The layout is like this:

* Part one of Record1 * Part two of Record1
* Part one of Record2 * Part two of Record2
* Part one of Record3 * Part two of Record3
...

In this case the rendered HTML I can think of is like this:

<table>
<tr>
<td>
<ul>
<li>Part one of Record1</li>
<li>Part one of Record2</li>
<li>Part one of Record3</li>

.......
</ul>
</td>
<td>
<ul>
<li>Part two of Record1</li>
<li>Part two of Record2</li>
<li>Part two of Record3</li>
.......

</ul>
</td>
</tr>
</table>

If this is what you need I think we have to use two ListView to render the
above HTML.

Another way to simulate the layout is like below:

<asp:ListView ID="ListView1" runat="server"
DataSourceID="LinqDataSource1" >
<LayoutTemplate>
LayoutTemplate

<asplaceHolder runat="server" ID="itemPlaceholder"></asplaceHolder>

</LayoutTemplate>
<ItemTemplate>
<div style="width:500px; height:50px;">
<div style="width:50%; height:100%; float:left; background-color:Yellow">
<ul>
<li>

<%#YourMethod(Eval("CompanyName")) %>
</li>
</ul>
</div>
<div style="width:50%; height:100%;float:right;background-color:Green">
<ul>
<li>
<%#Eval("CompanyName") %> -2
</li>
</ul>
</div>
<div style='clear:both;'></div>
</div>

</ItemTemplate>
</asp:ListView>

The above code will not render that HTML but the outcome is a similar
layout.

Please let me know which one meets your requirement. If none of them does
please clarify your requirement. You can paste the expected HTML for me to
understand it.

Regards,
Allen Chen
Microsoft Online Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

Note: MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 2 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions. Issues of this
nature are best handled working with a dedicated Microsoft Support Engineer
by contacting Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

 

[AG]

Allen,

Thanks for the reply. That is an interesting layout, but not what I am
looking for.

I would like to get either

<table>
<tr>
<td>
<ul>
<li>Record1</li>
<li>Record2</li>
<li>Record3</li>
.......
<li>Record10</li>
</ul>
</td>
<td>
<ul>
<li>Record11</li>
<li>Record12</li>
<li>Record13</li>
.......
<li>Record20</li>

</ul>
</td>
</tr>
</table>

OR

<table>
<tr>
<td>
<ul>
<li>Record1</li>
<li>Record3</li>
<li>Record5</li>
.......
<li>Record19</li>
</ul>
</td>
<td>
<ul>
<li>Record2</li>
<li>Record4</li>
<li>Record6</li>
.......
<li>Record20</li>

</ul>
</td>
</tr>
</table>

It could probably be done easier with a datalist, but I wanted to use a
listview in order to make use of it's add/edit capability as well as get
some experience using the listview.

I actually did it as follows, but my method makes each record an entire ul
with one li each. Plus, I don't quite understand how the GroupItemCount
parameter works.

<asp:ListView ID="lvServices" runat="server" DataSourceID="odsServices"
DataKeyNames="SvcID"
GroupItemCount="2" InsertItemPosition="LastItem">
<LayoutTemplate>
<table border="0" cellpadding="0" runat="server" id="tblProducts">
<tr runat="server" id="groupPlaceholder">
</tr>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr runat="server" id="productRow">
<td runat="server" id="itemPlaceholder">
</td>
</tr>
</GroupTemplate>
<ItemTemplate>
<td id="Td1" valign="top" runat="server">
<ul style="padding-bottom: 0px; padding-top: 0px; margin-bottom: 0px;">
<li>
<%#Eval("SvcName")%></li></ul>
</td>
</ItemTemplate>
</asp:ListView>


--

AG
Email: npATadhdataDOTcom

 

[Allen Chen [MSFT]]

Hi AG,

Thanks for your clarification. First, I have to say this cannot be done in
a normal way. GroupItemCount can help to fix the row count but not the
column count. Secondly, to render the second HTML in your previous post I
don't think one ListView is enough. ListView renders items one by one so
record 2 follows record 1. As you can see in the second HTML, record 2 is
far away from record 1. This is why we cannot simply achieve this with one
ListView control.

I'd like to show a hack way to render the first HTML in your previous post.
See below:

Aspx:

<asp:ListView ID="ListView1" runat="server"
DataSourceID="LinqDataSource1">
<LayoutTemplate>
<table>
<tr>
<td>
<ul>
<asplaceHolder runat="server" ID="itemPlaceholder"></asplaceHolder>
</ul>
</td>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<li>
<%#((ListViewDataItem)Container).DataItemIndex %>
</li>
<asp:Literal Visible='<%#Hack((ListViewDataItem)Container) %>'
Text="</ul></td><td><ul>" ID="HackLiteral" runat="server"></asp:Literal>
</ItemTemplate>
</asp:ListView>

<asp:LinqDataSource ID="LinqDataSource1" runat="server"
ContextTypeName="WebApplication16.DataClasses1DataContext"
TableName="Customers" onselected="LinqDataSource1_Selected">
</asp:LinqDataSource>

Aspx.cs:
int rowcount = 0;
protected bool Hack(ListViewDataItem container)
{
if (container.DataItemIndex == rowcount / 2)
{
return true;
}
return false;

}
protected void LinqDataSource1_Selected(object sender,
LinqDataSourceStatusEventArgs e)
{
//get total row count
rowcount= e.TotalRowCount;
}

As an experienced developer I think you will say it's not a good option.
But it's the only way I know that can render the HTML you need. If you
could permit other HTML that can display a similar layout we probably can
work together to come up with some more elegant code.

Please let me know if the above code works. BTW, you can refer to the
following picture to learn how to use GroupItemCount:

http://www.flickr.com/photos/47036843@N00/2082687026/

Regards,
Allen Chen
Microsoft Online Support

 

[AG]

Thanks Allen,

I used a variation of your method. The HTML comes out clean. I will just do
the add/edit/delete separately.

<table>
<tr>
<td valign="top">
<asp:ListView ID="lvServices" runat="server" DataSourceID="odsServices"
DataKeyNames="SvcID"
GroupItemCount="1" EnableViewState ="false">
<LayoutTemplate>
<ul>
<asplaceHolder runat="server"
ID="itemPlaceholder"></asplaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate><li><%#Eval("SvcName")%></li>
</ItemTemplate>
</asp:ListView>
</td>
<td valign="top">
<asp:ListView ID="lvServices1" runat="server" DataSourceID="odsServices"
DataKeyNames="SvcID"
GroupItemCount="1" >
<LayoutTemplate>
<ul>
<asplaceHolder runat="server"
ID="itemPlaceholder"></asplaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate><li><%#Eval("SvcName")%></li>
</ItemTemplate>
</asp:ListView>
</td>
</tr>
</table>

Private mintTotalRows As Integer = -1
Private Sub lvServices_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.ListViewItemEventArgs) Handles
lvServices.ItemDataBound
If e.Item.ItemType = ListViewItemType.DataItem Then
Dim dI As ListViewDataItem = CType(e.Item, ListViewDataItem)
If dI.DataItemIndex < Me.mintTotalRows / 2 Then
dI.Visible = True
Else
dI.Visible = False
End If
End If
End Sub

Private Sub lvServices1_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.ListViewItemEventArgs) Handles
lvServices1.ItemDataBound
If e.Item.ItemType = ListViewItemType.DataItem Then
Dim dI As ListViewDataItem = CType(e.Item, ListViewDataItem)
If dI.DataItemIndex < Me.mintTotalRows / 2 Then
dI.Visible = False
Else
dI.Visible = True
End If
End If

End Sub

Private Sub odsServices_Selected(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.ObjectDataSourceStatusEventArgs) Handles
odsServices.Selected
If Me.mintTotalRows = -1 Then
Dim dvData As DataView = CType(e.ReturnValue, DataView)
If dvData IsNot Nothing Then
Me.mintTotalRows = dvData.Count
End If
End If
End Sub


--

AG
Email: npATadhdataDOTcom

 

[Allen Chen [MSFT]]

You're welcome AG.

Thank you for using our Newsgroup Support Service!

Regards,
Allen Chen
Microsoft Online Community Support

=================================================
Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).
=================================================