ASP Listview. How to hide a table row using CSS - asp.net

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>

Related

How to make repeater element scrollable?

I have this repeater asp element:
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False" >
<ItemTemplate>
<div class="row1">
<table style="width: 100%">
<tr>
<td rowspan="4" onclick="parent.parent.ZoomToView(<%# Eval("Lon") %>, <%# Eval("Lat") %>, 2500)" style="cursor: pointer;">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="10">
<asp:Image class="toggleRow" ImageUrl="~/Images/vertical-dots.png" runat="server" Width="32"
Height="32" Style="height: 30px; position: relative; float: left; cursor: pointer;" /></td>
</td>
</tr>
<tr class="pointDescArea">
<td>text:</td>
<td rowspan="2">
<h1 style="color: gray"><%# Eval("Text") %></h1>
</td>
</tr>
<tr class="hidden">
<td>X:</td>
<td><%# Eval("Lon") %></td>
</tr>
<tr class="hidden">
<td>Y:</td>
<td><%# Eval("Lat") %></td>
</tr>
<tr>
</table>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div class="row2">
<table style="width: 100%">
<tr>
<td rowspan="4" onclick="parent.parent.ZoomToView(<%# Eval("Lon") %>, <%# Eval("Lat") %>, 2500)" style="cursor: pointer;">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="10">
<asp:Image class="toggleRow" ImageUrl="~/Images/vertical-dots.png" runat="server" Width="32"
Height="32" Style="height: 30px; position: relative; float: left; cursor: pointer;" /></td>
</td>
</tr>
<tr class="pointDescArea">
<td>טקסט:</td>
<td rowspan="2">
<h1 style="color: gray"><%# Eval("Text") %></h1>
</td>
</tr>
<tr class="hidden">
<td>X:</td>
<td><%# Eval("Lon") %></td>
</tr>
<tr class="hidden">
<td>Y:</td>
<td><%# Eval("Lat") %></td>
</tr>
</tr>
</table>
</div>
</AlternatingItemTemplate>
</asp:Repeater>
I need to set it's height to 500px and make scrollable.
How can I make this repeater scrollable vertically?

Put the repeater inside a div, set the div's height and use overflow-y
<div style="height: 500px; overflow-y: scroll;">
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False" >
...
</asp:Repeater>
</div>
Ideally the styling should be in style tags or in a stylesheet, but I'm showing it inline just for demonstration.

Show listview items vertically not horizontally

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>

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

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