I have made one html-table that contain a RadListView (with use of LayoutTemplate and ItemTemplate), and it works fine.
It's a Property-table with two columns ("CadastralNummer", "CadastralSomething").
(The table has as many rows as the property has cadastrals)
Now comes the tricky part for me!
I now have a list of properties, instead of just one.
How do repeat my table for every property below each other?
If it can help, here's my code for one table:
<table border="0" cellspacing="2" cellpadding="0" width="75%">
<thead>
<tr>
<td style="width: 25%;">
CadastralNummer
</td>
<td style="width: 25%;">
CadastralSomething
</td>
</tr>
</thead>
<telerik:RadListView runat="server"
ID="RadListViewProperty"
AllowPaging="false" DataKeyNames="PropertyNR"
OverrideDataSourceControlSorting="true"
ItemPlaceholderID="ListViewContainer"
OnItemDataBound="RadListViewProperty_ItemDataBound">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="listViewContainer" />
</LayoutTemplate>
<ItemTemplate>
<tbody>
<tr>
<td style="vertical-align: top;">
<asp:Label ID="lblCadastralNummer" runat="server" />
</td>
<td style="vertical-align: top;">
<asp:Label ID="lblCadastralSomething" runat="server" />
</td>
</tr>
</tbody>
</ItemTemplate>
</telerik:RadListView>
</table>
Have you seen the repeater control? This may provide what you need.
I put my table/RadListView inside another table/RadListView, and it worked fine.
Related
I am creating a webpage that is listing the names of places using ASP.NET. I am using a data source to read the data from a database file. The list view is displaying all the data in one column. What I am trying to do is add 7 rows of data and then as soon as the 7th row has been added, add another column, and then continue writing the data in the new created column. Here is my code:
<asp:ListView runat="server" DataSourceID="cwDataSource">
<ItemTemplate>
<tr style="">
<td>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td>          </td>
<td>
VIEW STORE PAGE
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr>
<td>
 
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<td>COLUMN #</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
Example of what the output should look like (The 'VIEW STORE PAGE' is just a link):
COLUMN 1 COLUMN 2
A.ADDED VIEW STORE PAGE H.ADDED VIEW STORE PAGE
B.ADDED VIEW STORE PAGE I.ADDED VIEW STORE PAGE
C.ADDED VIEW STORE PAGE J.ADDED VIEW STORE PAGE
D.ADDED VIEW STORE PAGE K.ADDED VIEW STORE PAGE
E.ADDED VIEW STORE PAGE L.ADDED VIEW STORE PAGE
F.ADDED VIEW STORE PAGE M.ADDED VIEW STORE PAGE
G.ADDED VIEW STORE PAGE N.ADDED VIEW STORE PAGE
Any help would be appreciated.
I got it working:
<asp:DataList ID="cwDataList" runat="server" DataSourceID="cwDataSource" RepeatDirection=Vertical RepeatColumns=2 style="text-align: center">
<ItemTemplate>
<table style="width: 500px;">
<tr style="">
<td align="left" style="width: 250px; height: 18px">
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td align="left" style="width: 250px; height: 18px">
VIEW STORE PAGE
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
I'm making a login form within a table but I'm having a hard time formatting everything just the way I want to (never mind the left margin of the table, is just messed up on paint).
I want to make it look something like this:
However it currently looks like this:
The whole table is inside a div called "span54".
The checkbox "box" currently has 50px width (I want it like that), however this also affects the width of the textboxes.
How can I differentiate textboxes within that div?
The current CSS code:
checkbox (inspected checkox)
textbox (inspected textbox)
table code
<table class="logintable">
<tr>
<th colspan="2" rowspan="1">Login</th>
</tr>
<tr>
<td class="creds"><asp:label id="user" runat="server" text="User:" /></td>
<td colspan="1" rowspan="1"><input id="UserNameTextBox" type="text" runat="server" /></td>
<td colspan="1" rowspan="1"><asp:RequiredFieldValidator ID="vUserName" ControlToValidate="UserNameTextBox" Display="Static" ErrorMessage="Username Inválido" runat="server" /></td>
</tr>
<tr>
<td class="creds"><asp:label id="pass" runat="server" text="Password:" /></td>
<td colspan="1" rowspan="1"><input id="PasswordTextBox" type="password" runat="server" /></td>
<td colspan="1" rowspan="1"><asp:RequiredFieldValidator ID="vUserPass" ControlToValidate="PasswordTextBox" Display="Static" ErrorMessage="Password Inválida" runat="server" /></td>
</tr>
<tr>
<td colspan="3" rowspan="1"><asp:Button ID="btnlogin" runat="server" Text="Login" Class="btn-login" onclick="LoginButton_Click" /><asp:CheckBox id="RemPassword" cssclass="checkbox" runat="server" autopostback="false" text="Lembrar-me"/></td>
</tr>
<tr>
<td><asp:Label id="MsgLabel" runat="server" /></td>
</tr>
</table>
Edit file dq.css, near line 336 change width:50px; to width:160px;
Is there a way to access the "th", in the code behind. I would like to add padding to the header depending on the item value.
<LayoutTemplate>
<table runat="server" >
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" class="UserLayoutTbl">
<tr runat="server" style="">
<th runat="server" width="140" align="left">
Date</th>
<th runat="server" width="140" align="left">
Ref. No.</th>
<th runat="server" width="270" align="left">
Description</th>
<%-- <th runat="server" width="90" align="right" style = '<%# GetAmountLabelStyle() %>'>
Amount</th>--%>
<th id="Th1" runat="server" width="90" align="right">
Amount</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
First, give an ID to the element you want to change. After DataBind of the ListView, you can access the control by its ID using the FindControl method of the ListView. Then, you can convert the returned control to HtmlTableCell to proper handle it:
// thDate is the <th> ID
HtmlTableCell thDate = lstItems.FindControl("thDate") as HtmlTableCell;
I seen similar questions asked various places, but haven't really found an answer to this that works for me yet. Basically, I have a ListView where I want to hide table rows if a particular value in the data binding if a particular condition is true (most often if the value of the item is null or empty string). I've tried making the tr runat="server" and setting the condition on the visible property, but this returns a runtime error "The server tag is not well formed." Here's what I'm trying to do:
<asp:ListView runat="server" ID="FullInfoListView">
<LayoutTemplate>
<table class="tablestripe" width="100%">
<asp:Placeholder runat="server" ID="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr valign="top" class="eventrow1">
<td colspan="2">
<h3><%# Eval("FirstName") Eval("LastName") %></h3>
</td>
</tr>
<tr valign="top" runat="server" Visible="<%# (bool)Eval("PhotoVis") %>">
<td colspan="2">
<img src="~/Userphoto/thumb/<%# Eval("NetworkLogin") %>.jpg" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
You have to have single quotes around the Visible setter:
<tr valign="top" runat="server" Visible='<%# (bool)Eval("PhotoVis") %>'>
<td colspan="2">
<img src='~/Userphoto/thumb/<%# Eval("NetworkLogin") %>.jpg' />
</td>
</tr>
You could wrap the row in a PlaceHolder:
<asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible='<%# (bool)Eval("PhotoVis") %>'>
<tr valign="top">
<td colspan="2">
<img src='~/Userphoto/thumb/<%# Eval("NetworkLogin") %>.jpg' />
</td>
</tr>
</asp:PlaceHolder>
EDIT: Included single quotes around image src attribute
Try setting style="display:none" instead of using Visible.
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();
});
})