We Keep Coding

Redirect on Listview row click

I have a Listview and one of the columns is called id_Number.
Is it possible to redirect to another page, if user clicks on one of the rows?
For example if id_Number is 4, than page should be redirected to ~/Page.aspx?id=4.
Code:
<asp:ListView ID="ListView1" runat="server"
DataKeyNames="id_Number" >
<EmptyDataTemplate>
<table id="Table1" runat="server" style="">
<tr>
<td>
No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<ItemTemplate>
<tr style="font-family: Arial; color: #FFFFFF" onMouseOver="this.bgColor='#219DD0';" onMouseOut="this.bgColor='#252526';">
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("id_Number") %>' />
</td>
<td>
<asp:Label ID="TextLabel" runat="server" Text='<%# Eval("Text") %>' />
</td>
<td>
<asp:Label ID="DateLabel" runat="server" Text='<%# Eval("Date") %>' />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="Table2" runat="server">
<tr id="Tr1" runat="server">
<td id="Td1" runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" style="">
<tr id="Tr2" runat="server" style="">
<th id="Th1" runat="server">
Name</th>
<th id="Th2" runat="server">
Text</th>
<th id="Th3" runat="server">
Date</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>

You can add an HTML link or a JavaScript into the ItemTemplate of your ListView pretty easily:
The "columns" are just HTML columns; in the ItemTemplate, you have access to all of your data, including id_number, so you can use it anywhere in the HTML, not just inside a column.
Since you wan the whole row to be clickable, I'd use a JavaScript function on the onClick event of the HTML table row <TR> element. You already have 2 events (onMouseOver, onMouseOut), with JavaScript in them, so this would just be one more...
A JavaScript redirect utilizes window.location.href which will redirect in the same window, assuming that's what you want (as opposed to a new window, etc.):
<ItemTemplate>
<tr style="font-family: Arial; color: #FFFFFF"
onMouseOver="this.bgColor='#219DD0';"
onMouseOut="this.bgColor='#252526';"
onClick="window.location.href = 'some/path/Page.aspx?id=<%# Eval("id_Number") %>';"
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("id_Number") %>' />
</td>
<td>
<asp:Label ID="TextLabel" runat="server" Text='<%# Eval("Text") %>' />
</td>
<td>
<asp:Label ID="DateLabel" runat="server" Text='<%# Eval("Date") %>' />
</td>
</tr>
</ItemTemplate>
One thing to note is for the path of Page.aspx, you have to use a relative path.
~/page.aspx?id=
Is a .net path that gets compiled into the full relative path to that page.
However, bacause your ItemTemplate contains HTML, you'd need the full (relative) path to Page.aspx in there.
So instead it should be (just an example):
/some/path/page.aspx?id= <-- page.aspx lives on http://www.yoursite.com/some/path/page.aspx
/page.aspx?id= <-- page.aspx lives on root, http://www.yoursite.com/page.aspx
Alternately you can use
onClick="window.location.href = '<% System.Web.VirtualPathUtility.ToAbsolute("~/Page.Aspx?ID=" + Eval("id_number")); %>';"

two rows per page when a web page containing listview control is genrated in PDF?

Using the code below i am trying to page break after every two rows of my list view control
when my apsx page is genrated to a PDF page...But some how its not working ..can someone please check what i am doing wrong here or suggest any other method to achieve it
<asp:ListView ID="ListView1" runat="server"
DataSourceID="DS_DvtImages" GroupItemCount="2">
<ItemTemplate>
<td id="Td1" runat="server" class='<%# ((ListViewDataItem)Container).DisplayIndex % 2 == 0 ? "page-break-before: always" : "" %>' style="color: #333333; border-style:solid;" >
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/ImageHandler.ashx?MaxHeight=500&MaxWidth=500&AttachmentId=" + Eval("ATTACHMENTID") %>' Height="300px" Width="300px" />
<br />
<span style="width:300px; background-color:Gray">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("ATT_name") %>'
Font-Size="10pt" ForeColor="Black" Width="100%" />
</span>
</td>
</ItemTemplate>
<LayoutTemplate>
<table id="Table1" runat="server" class="ListViewMainTable">
<tr id="Tr1" runat="server">
<td id="Td2" runat="server">
<table ID="groupPlaceholderContainer" runat="server" border="1"
style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr ID="groupPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr id="Tr2" runat="server">
</tr>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr ID="itemPlaceholderContainer" runat="server">
<td ID="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
</asp:ListView>

page-break-before: always is the style, not the class. You will have to create a class with the style as page-break-before: always and then reference that class

Toggle visibility of specific elements in a ListView

I have a list view on a page and am trying emulate the toggling effect of a tree view. When first bound the detail elements (LBL_ActionTitle, LBL_Action, LBL_UrlTitle, LBL_Url) are set to visibility = false. I would like to have the click event of the element (LB_ExpandCollapse) toggle the visibility of detail elements directly related to it. IE not all the elements of that type on the page. I am not sure how to accomplish this, or if it can be done, and was hoping that someone could point me in the right direction. Here is the control for reference.
<div id="logContainer">
<asp:ListView ID=LV_Logs runat="server">
<LayoutTemplate>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td></td>
<td style="width:85%" />
</tr>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<hr />
<asp:LinkButton ID="LB_ExpandCollapse" runat="server" CausesValidation="false" OnClick="expandCollapse_Click">+</asp:LinkButton>
<asp:Label ID="LBL_MessageType" runat="server" Text='<%# Eval("messageType") %>'></asp:Label>
<hr />
</td>
<td style="text-align: right">
<hr />
<asp:Label ID="LBL_Message" runat="server" Text='<%# Eval("messageTime") %>'></asp:Label>
<hr />
</td>
</tr>
<tr style="text-align: left">
<td style="padding-left: 65px">
<asp:Label ID="LBL_ActionTitle" Visibility="false" runat="server" Text="User Action:"></asp:Label>
</td>
<td style="padding-left: 10px">
<asp:Label ID="LBL_Action" Visibility="false" runat="server" Text='<%# Eval("action") %>'></asp:Label>
</td>
</tr>
<tr style="text-align: left">
<td style="padding-left: 65px">
<asp:Label ID="LBL_UrlTitle" Visibility="false" runat="server" Text="URL:"></asp:Label>
</td>
<td style="padding-left: 10px">
<asp:Label ID="LBL_Url" runat="server" Visibility="false" Text='<%# Eval("url") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="LV_Logs"
PageSize="20" OnPreRender="DataPagerProducts_PreRender">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>

I suggest you put the ID of the record as an ID on the TR containing the fields you want toggled. Then in your expandCollapseClick also pass the ID, so that you can set the row's style to display:block. Of course this assumes that all the rows start out at display:none. ie.
<tr id='<%# Eval("recordId") %>' style='display:none'>
and then in Javascript (pseudo-code)
function expandCollapseClick(row)
{
document.getElementById(row).style.display = 'block';
}
Then change your button to execute client-side as in:
<button onclick='expandCollapse(<%# Eval("recordId") %>)'>+</button>
This will call the code to display the row, passing in the id of the correct row. Of course this assumes that the table is fully populated when the page is retrieved and all you want to do is hide/show detail.

How To Position Table Inside The Panel C# Web App?

i am trying to vertically align the table present in the panel but i cant and when i apply style properties to the table it does not work ? means there would be no effect of style property on it as my code is given below,
<asp:Panel ID="Panel1" runat="server"
style="z-index:0;left:250px;position:absolute;top:160px; height: 160px; padding:10"
BackColor="Green" Width="300px">
<div style="width: 295px; height: 155px;" align= "center">
<table style="height: 48px; width: 187px; margin-left:0px; min-height:14px; min-width:55px; vertical-align:bottom" align="center" bgcolor="green" >
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="UserName" ForeColor="White"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Password" ForeColor="White"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" textmode="Password" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" ForeColor="White"></asp:Label>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Login" onclick="Button1_Click" />
</td>
</tr>
</table>
</div>
</asp:Panel>
Hopes for your suggestions

Vertical alignment of some content within parent container is always tricky if you don't know the height of the content. Solution is to have a wrapper div in between parent & content elements. Then have outer container with "display:table" and wrapper div with "display:table-cell" aligned vertically in middle. See this fiddle for the illustration: http://jsfiddle.net/myXL3/3/
For complete information on this approach, see this excellent article: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

The problem here is that you have the table within a div element. Adding vertical-align:middle to the div's style should work. This assumes that the div is always "higher" than the table (as in your code snippet).
(Also, you have margins in your table's style - they should be removed to make sure they are not interfering with the vertical alignment)

Paging in Repeater

Just like we have pagesize property in gridview that allows us to switch back and forth between pages, isn't there anyway i can incorporate the same functionality in a repeater.
<table id="myTable">
<tbody>
<asp:Repeater ID="Repeater1" runat="server"
onitemcommand="addItem_OnClick" DataMember="DefaultView">
<ItemTemplate>
<tr>
<td>
<div class="product">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr valign="top">
<td width="105"><asp:HyperLink ID="HLSysDet" runat="server"
NavigateUrl='<%# "/Product.aspx?productId=" + Eval("ProductDescriptionId") %>'>
<asp:Image ID="Image1" runat="server" width="85" height="85"
ImageUrl='<%# Eval("Thumbnail")%>' border="0" />
</asp:HyperLink></td>
<td><ItemTemplate><a
href='<%# "/Product.aspx?productId=" + Eval("ProductDescriptionId") %>'>
'<%# Eval("ProductName")%>'</a> </ItemTemplate></b><br />
<br />
Manufacturer: <%# Eval("Manufacturer")%><br />
<br />
<b>Rs <%# Eval("UnitPrice")%>
</b><br />
<br />
Weight: <%# Eval("Weight")%> Kg<br />
</td>
<td width="20"></td>
<td valign="bottom" width="130">
<%# Eval("Quantity")%>+ in stock<br />
<asp:TextBox ID="_qty" runat="server" CssClass="textbox"
MaxLength="2" Text="1" Width="30"
Visible='<%# showBtn(Eval("Quantity")) %>' /> <asp:RangeValidator
ID="RangeValidator1" runat="server" ControlToValidate="_qty"
ErrorMessage="*" ForeColor="Red" MaximumValue="50"
MinimumValue="1"></asp:RangeValidator>
<div class="buttons"><span id="Span1" class="mandatory"
runat="server" visible='<%# isQty(Eval("Quantity")) %>'>
Sorry, this item is out of stock</span></div>
<div class="buttons"><br />
<asp:LinkButton ID="CommandButton" runat="server"
Text='Add to Cart' CssClass="positive" CommandName="Add"
CommandArgument='<%# Eval("ProductDescriptionId") %>'
Visible='<%# showBtn(Eval("Quantity")) %>' />
</div>
</td>
</tr>
</div>
</table>
</div>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
<div class='pager'><a href='#' alt='Previous' class='prevPage'>Prev</a>
<span class='currentPage'></span> of <span class='totalPages'></span> <a
href='#' alt='Next' class='nextPage'>Next</a></div>

Check out http://plugins.jquery.com/project/paginateTable.
It's basically pagination on a html table ( which you can build using a repeater ) using jQuery.
It's easy to use, has customization options.
I used it already, worked just fine.
EDIT
You'd have to build your table with a repeater. I've provided a quick example below:
<table id="myTable">
<tbody>
<asp:Repeater ...>
<ItemTemplate>
<tr><td><%# Eval('Description') %></td></tr>
</ItemTemplate>
</asp:Repeater>
<tbody>
</table>
<div class='pager'>
<a href='#' alt='Previous' class='prevPage'>Prev</a>
<span class='currentPage'></span> of <span class='totalPages'></span>
<a href='#' alt='Next' class='nextPage'>Next</a>
</div>
Your javascript should then call the paginateTable function on this
<script>
$(document).ready(function () {
$('#myTable').paginateTable({ rowsPerPage: 2 });
});
</script>

Repeater and control offers a quick and flexible means of displaying data on a ASPX page. But it offers no paging functionality built in.
However you may do something about that ...
Refer to the following page if you like to figure it out:
http://www.codeproject.com/KB/webforms/Aspnet_Repeater_Control.aspx

You can use PagedDataSource.
Repeater with Paging and Sorting Features
Paging Repeater Control using PagedDataSource