Show listview items vertically not horizontally - asp.net

This is probably an dumb question but I have a ListView that displays data all in one row like this
Name Address Phone
what I want is to display the data vertically like this
Name
Address
Phone
what do I need to change to accomplish this?
<asp:ListView ID="ListView1" runat="server" >
<ItemTemplate>
<tr id="tbl1" runat="server">
<td><%# Eval("name")%></td>
<td><%# Eval("address")%></td>
<td><%# Eval("phone")%></td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="tbl1" runat="server">
<tr id="tr1" runat="server">
<td id="td1" runat="server">name</td>
</tr>
<tr id="tr2" runat="server">
<td id="td2" runat="server">address</td>
</tr>
<tr id="tr3" runat="server">
<td id="td3" runat="server">phone</td>
</tr>
<tr id="ItemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
</asp:ListView>

<asp:ListView ID="ListView1" runat="server" >
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<table>
<tr>
<td><%# Eval("name") %></td>
</tr>
<tr>
<td><%# Eval("address") %></td>
</tr>
<tr>
<td><%# Eval("phone") %></td>
</tr>
</table>
</ItemTemplate>
</asp:ListView>

Related

Table layout in repeater control

I am trying to get the Table shown in the image as layout in a repeater control.Since i am newbie to it
Can someplease guide me on this. The section below Customer number is the only thing that should repeat vertially and I want only two repeats (i.e two item details per page ) on each page
Thank You
<asp:Repeater ID="RepeaterVersionsForPie" runat="server">
<HeaderTemplate>
<table id="VersionsTable">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td class="style3">CustomerNumber</td>
<td class="style4">Test1:</td>
<td class="style5">Test2</td>
<td class="style7">Test3:</td>
<td class="style8">Test4:</td>
</tr>
<tr>
<td class="style9"></td>
<td class="style10"></td>
<td class="style11"></td>
<td class="style12"></td>
<td class="style13"></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<asp:Repeater ID="RepeaterVersionsForPie" runat="server">
<HeaderTemplate>
<table id="VersionsTable">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td class="style3">CustomerNumber</td>
<td class="style4">Test1:</td>
<td class="style5">Test2</td>
<td class="style7">Test3:</td>
<td class="style8">Test4:</td>
</tr>
<tr>
<td class="style9" colspan="5"></td>
</tr>
<tr>
<td>Item Type:</td>
<td rowspan="3" colspan="4" valign="top">Photo</td>
</tr>
<tr>
<td>Item Number:</td>
</tr>
<tr>
<td>Date:</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Here's a quick jsfiddle

What is the best way to Handle the Sort Direction in repeater custom paging

I have a repeater with three columns
city, state, zip
<table>
<asp:repeater id="rpt" runat="server">
<HeaderTemplate>
<tr>
<td>
<asp:LinkButton id="lnkCity" runat="server" CommandArgment="City">Name</asp:LinkButton>
</td>
<td>
<asp:LinkButton id="lnkState" runat="server" CommandArgment="State">State</asp:LinkButton></td>
<td><asp:LinkButton id="lnkZip" runat="server" CommandArgment="Name">Zip</asp:LinkButton></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("City") %></td>
<td><%# Eval("State") %></td>
<td><%# Eval("Zip") %></td>
</tr>
</ItemTemplate>
</asp:repeater>
</table>
what is the best way to handle the sort direction for the respective column

ASP Listview. How to hide a table row using CSS

If i use the following markup for my ListView it will ignore the css properties on the div.
What is it i don't get here ?
<ItemTemplate>
<tr>
<td><%# Eval("RowNumber")%></td>
<td><%# Eval("Desc")%></td>
</tr>
<div style="display: none; visibility: hidden">
<tr>
<td><%# Eval("RowNumber")%></td>
<td><%# Eval("Desc")%></td>
</tr>
</div>
</ItemTemplate>
</asp:ListView>
Why not just do:
<ItemTemplate>
<tr>
<td><%# Eval("RowNumber")%></td>
<td><%# Eval("Desc")%></td>
</tr>
<tr style="display: none;">
<td><%# Eval("RowNumber")%></td>
<td><%# Eval("Desc")%></td>
</tr>
</ItemTemplate>
</asp:ListView>

How to be overflow the row of table?

I created a webpage with the uploaded files and the uploading control in asp.net. I got a problem that is design problem.
<table style="width:500px;height:500px">
<tr>
<td>Uploading page<td>
</tr>
<tr>
<td style="height:300px;overflow:auto">
<asp:Repeater ID="UploadedFileList" runat="server">
<ItemTemplate>
<%# Eval("FileName") %>
</ItemTemplate>
</asp:Repeater>
<td>
</tr>
<tr>
<td><asp:FileUpload ID="FileUpload1" runat="server"/></td>
</tr>
</table>
I want to be overflow the sencod row. How can I do that?
You should keep another DIV inside the td to work better in this situation.
<table style="width:500px;height:500px">
<tr>
<td>Uploading page<td>
</tr>
<tr>
<td style="height:300px;">
<div style="height:300px;overflow:auto">
<asp:Repeater ID="UploadedFileList" runat="server">
<ItemTemplate>
<%# Eval("FileName") %>
</ItemTemplate>
</asp:Repeater>
</div>
<td>
</tr>
<tr>
<td><asp:FileUpload ID="FileUpload1" runat="server"/></td>
</tr>
</table>

Toggle rows created using Repeater Control ASP.NET

I am creating a list of data using Repeater Control. Some of the rows might have other rows that should be toggled using the main row's clickable image.
Here, is the HTML part
<table cellpadding="2" cellspacing="0" width="100%">
<asp:Repeater ID="repeatLockers" runat="Server">
<HeaderTemplate>
<tr>
<td> </td>
<td>A</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr id="trItem" class="SomeParentClass" runat="server">
<td>
<img id="imgToggleHomeInfo" runat="server" alt="show/hide repetitves" src="icon_plus.gif"
style="cursor: pointer" />
</td>
<td>
<asp:Label ID="lbl" runat="server"></asp:Label>
</td>
</tr>
<tr id="trAddOnFee" runat="server" class="SomeClass" style="display: none;">
<td colspan="2">
<table cellpadding="4" cellspacing="2" width="100%">
<tr>
<td class="DgHeader">A</td>
<td class="DgHeader">B</td>
</tr>
<asp:Repeater ID="repeatRepetitives" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblA" runat="server"></asp:Label>
</td>
<td align="right">
<asp:Label ID="lblB" runat="server"></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
How could I toggle the Rows with class as "SomeClass" inside on click of imgToggleHomeInfo" image on its parent row using Jquery?
I'd find the parent row of the image then toggle it's next sibling.
$(document).ready( function() {
$("[id$='imageToggleHomeInfo']").click( function() {
$(this).closest('tr').next().toggle();
});
})

Resources