I'm trying to build a HTML table using an ASP repeater:
<asp:Repeater ID="RepeaterVersionsForPie" runat="server">
<ItemTemplate>
<table id="VersionsTable" >
<tr>
<th>
<%#Eval("nameVersion")%>
</th>
</tr>
</ItemTemplate>
<ItemTemplate>
<tbody>
<tr>
<td tag="<%#Eval("idVersion")%>">
<%#Eval("NumberOfCompaniesUsingThisVersion")%>
</td>
</tr>
</tbody>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
This is a basic table which consists in two lines and X columns.
The second line appears without any problems while the first one is invisible.
Can anyone help to find what's missing?
Thanks in advance.
I think the core problem is that Repeater isn't designed to repeat horizontally.
Maybe you should try using DataList which allows to specify the RepeatingDirection.
Update
If you don't need to repeat horizontally (like your question suggests "...two lines and X columns") your Repeatershould look like this
<asp:Repeater ID="RepeaterVersionsForPie" runat="server">
<HeaderTemplate>
<table id="VersionsTable">
</HeaderTemplate>
<ItemTemplate>
<tr>
<th><%# Eval("nameVersion") %></th>
<!-- Important: Put attributes in single quotes so they don't get
mixed up with your #Eval("xxx") double quotes! -->
<td tag='<%#Eval("idVersion")%>'>
<%# Eval("DocumentName") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Note that you must not repeat the <table> in your <ItemTemplate> and to use single quotes when you need to put your Eval inside an attribute.
Related
I have a jsp that displays a table of xml files and I want do display its content when I click on certain file in a table, but I dont know how to remember which row ID i clicked on so I know which file to display. This code displays table of files.
<table class="zakladni" border="1">
<thead>
<tr>
<th>Name</th>
<th>Version</th>
</tr>
</thead>
<s:useActionBean beanclass="org.cz.muni.fi.pb138.WARActionBean" var="actionBean"/>
<c:forEach items="${actionBean.getWARs()}" var="WAR">
<tr>
<td><c:out value="${WAR.getFileName()}"/></td>
<td><c:out value="${WAR.getTimestamp()} "/></td>
</tr>
</c:forEach>
</table>
The easiest solution is to generate an anchor (<a> element) directly into the table. That would look something like this:
<td>
<a href="fileDir/${WAR.getFileName()}">
<c:out value="${WAR.getFileName()} "/>
</a>
</td>
Where I suppose the file itself is stored in a directory fileDir, you can change it anyway you need.
I just hope you get the idea. And btw, greetings from Cuni!
Browser returns me this problem:
CS1502: The best overloaded method match for 'System.Web.UI.HtmlControls.HtmlTableRowCollection.Add(System.Web.UI.HtmlControls.HtmlTableRow)' has some invalid arguments
I have no idea about the problem. I use this repeater object and table like this all the time. and it works fine with this way. But now it gives an error. Where is the problem?
thanks!!
design side
<table id="myTable" runat="server" class="table table-striped table-hover">
<asp:Repeater ID="lstBanks" runat="server" OnItemDataBound="lstBanks_ItemDataBound"
OnItemCommand="lstBanks_ItemCommand">
<ItemTemplate>
<tr>
<td>
SSSs
<asp:HiddenField ID="hfID" Value='<%#Eval("ID") %>' runat="server" />
</td>
<td>
SSS
</td>
<td>
SSS
</td>
<td>
SSS
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
You shouldn't have the runat="server" attribute on your <table>, element, since you're building raw HTML for it. It's parsing that into memory as a strongly-typed table, then getting confused when you try and add a Repeater instead of a tr. Just remove that attribute and I believe it should work.
Although that all said, you might want to switch over to GridView. Each has advantages, and admittedly I prefer MVC because I can write HTML similar to what you're doing. But in WebForms, a GridView is likely preferable.
I read here that a td tag must be nested, so I'm confused when I see the ItemTemplate property tag of a ListView looking like this:
<ItemTemplate>
<td id="Td2" runat="server">
<table>
<tr>
<td> </td>
<td>
<a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
<img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>"
width="100" height="75" /></a>
</td>
<td>
<a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
<span class="ProductName">
<%#:Item.ProductName%>
</span>
</a>
<br />
<span class="ProductPrice">
<b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%>
</span>
<br />
</td>
</tr>
</table>
</td>
</ItemTemplate>
Does this have to do with the fact that ListView inherits from some class and implements a ton of interfaces? Or does it have to do with some aspect of ItemTemplate that I'm not familiar with? Is my source wrong or is it "just an ASP thing"?
I don't know what your LayoutTemplate looks like but this really has nothing to do with the ListView per se but more with the HTML layout that the developer chose. td's best belong inside a tr but these are just tags. You can change the css and redefine however you want. The browser will then interpret it and display it and then you get to deal with the aftermath of your choices =).
A possible way the code above makes sense is:
<LayoutTemplate>
<table border="0" cellpadding="1">
<tr>
<th>Product</th>
</tr>
<tr>
<td id="itemPlaceholder" runat="server"></td>
</tr>
</table>
</LayoutTemplate>
This would make a single column outer table with a product heading and then each row of that table would contain your inner table (per product) above.
It's just the way asp.net has you define your controls. Once the asp.net page is rendered (converted to pure html), those td elements should be nested in a tr. You can see the output by viewing the source of the page in your browser.
In my JSF app's page template, I use ui:repeat to iterate over some data to build an HTML table. I want to use basic HTML tags for this rather than something like h:dataTable, because when I tried to apply some styles and JavaScript events to that, they didn't appear on the correct elements. However, when using ui:repeat for this purpose, I find that it adds invalid tr and td opening an closing tags at inappropriate places.
The page template, has code similar to this:
<table border="1" style="width: 100%;">
<ui:repeat var="row" value="#{bean.testData}">
<tr>
<ui:repeat var="column" value="#{bean.testData}">
<td>#{row}, #{column}</td>
</ui:repeat>
</tr>
</ui:repeat>
</table>
I actually want to do something more complex than this, but this is the simplest example of the problem.
The bean contains:
private final String[] testData = {"fu", "bar"};
public String[] getTestData() {
return this.testData;
}
The output of this is:
<table border="1" style="width: 100%;"></td>
</tr>
<tr>
<td>
<tr>
<td>fu, fu</td>
<td>fu, bar</td>
</tr>
<tr>
<td>bar, fu</td>
<td>bar, bar</td>
</tr></td>
</tr>
<tr>
<td>
</table>
What I expected the output to be is:
<table border="1" style="width: 100%;">
<tr>
<td>fu, fu</td>
<td>fu, bar</td>
</tr>
<tr>
<td>bar, fu</td>
<td>bar, bar</td>
</tr>
</table>
I can't figure out why JSF's adding this at the beginning and end of the ui:repeat loop's output:
</td>
</tr>
<tr>
<td>
In Google Chrome and Firefox, this causes an extra row containing a single, empty cell at the top and bottom of the table.
Any ideas of how to prevent this?
Update: I didn't think to mention that this table I'm generating will appear inside a h:panelGrid element. I don't know whether that will make a difference to this question or not.
As per the update, you need to encapsulate your code inside a JSF tag like this :
<h:panelGrid>
<ui:fragment>
<table border="1" style="width: 100%;">
<ui:repeat var="row" value="#{bean.testData}">
<tr>
<ui:repeat var="column" value="#{bean.testData}">
<td>#{row}, #{column}</td>
</ui:repeat>
</tr>
</ui:repeat>
</table>
</ui:fragment>
</h:panelGrid>
Ortherwise the rendering of the h:panelGrid will not be able to split correctly in cell the nested content. h:panelGrid is designed to handle JSF components only.
More info :
JSF 2 h:panelGrid documentation
JSF 2 h:panelGrid example
I am trying to get this table on my site to have an image on the left and information about the staff member on the left. It is in a WordPress page but regardless of weather it's on the page or in a standalone HTML document it doesn't seem to render the way I want it to.
It's supposed to follow the same general idea as http://grab.by/djQk.
I attempted to copy their source but couldn't get it to render so I pulled their source from my site and started from scratch and still couldn't get it working.
http://radio.powercastmedia.net/staff/
I have implemented what you need using CSS instead of tables.
See this JSFiddle
Cheers, Sam
If you're using tables....
<table>
<tr>
<td style="width: 25%;">
<img src="blah"/>
</td>
<td>
<table>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
<td>
</tr>
</table>
Note: the problem with your pastebin example is that you're using <tr> inside a <td> which is incorrect - <tr> can only go inside a table so you need additional table tags.
It's also possible to do with a single table using colspan and rowspan on individual cells, but I'd personally prefer to do it by making the image a float left eg:
<div>
<img src="blah" style="float: left;"/>
<p>Name: John</p>
<p>Something else</p>
</div>