ListItem with image and text?

L

lordbah

Newcomer
Joined
Sep 14, 2008
Messages
5
I would like to have a RadioButtonList where each ListItem has associated image and text.

radiobtn img text
radiobtn img text

With the image and text aligned with the button, and the images and text of each button aligned as well. But any attempt to embellish a ListItem gives me errors that "ListItem cannot have children" or "Code render not allowed here" or the like. The fact that I can't find anything like this anywhere on the web makes me think that everyone does this kind of thing in some other manner and that it's so obvious that no one feels any need to discuss it.

This is all in the context of one column in a DataGrid.

How would you accomplish this?
 
Whats the markup that you are trying to use?

You should be able to use a Template Column and in there you should be able to put other ASP.NET controls inside.
 
I'll try to recreate my failed attempts.

---

This attempt generated

System.Web.HttpException: 'ListItem' cannot have children of type System.Web.UI.WebControls.PlaceHolder

This doesn't even include the icon, just trying to get text from the datatable.

Code: 
<ASP:DataGrid id="MyDataGrid" runat="server" ... EnableViewState="true"
AutoGenerateColumns="false" OnItemCreated="ItemCreated">
<columns>
	<asp:BoundColumn runat="server" DataField="date" HeaderText="Date" ReadOnly="true" />
	<asp:TemplateColumn>
		<ItemTemplate>
			<asp:RadioButtonList runat="server" id="radio">
				<asp:ListItem runat="server" id="radio1" Value='A'>
					<asp:PlaceHolder id="choice1" runat="server"><%= Eval("top") %></asp:PlaceHolder>
				</asp:ListItem>
				<asp:ListItem runat="server" id="radio2" Value='B'>
					<asp:PlaceHolder id="choice2" runat="server"><%= Eval("bottom") %></asp:PlaceHolder>
				</asp:ListItem>
			</asp:RadioButtonList>
		</ItemTemplate>
	</asp:TemplateColumn>
</columns>
</ASP:DataGrid>

---

This generates a similar exception

System.Web.HttpException: 'ListItem' cannot have children of type System.Web.UI.WebControls.Label

Code: 
				<asp:ListItem runat="server" id="radio1" Value='A'>
					<asp:Label runat="server" id="choice1" VerticalAlign="Middle" Text='<%# Eval("top") %>' />
				</asp:ListItem>
---

The "Code render not allowed" was I think when I was trying <br> and <img> in the ListItem.

I also tried to do something with attributes of ListItem and didn't have any luck with that either.
 
Nate Bross said:
I don't know if <ListItem> supports controls inside of it; can you use some sort of TemplateItem inside the <RadioButtonList>?
Click to expand...

I have no idea. Can't seem to find documentation on TemplateItem. If you mean ItemTemplate, I still have no idea - a book I read talks about it in the context of a TemplateColumn, I don't know if it's allowed anywhere else. What did you have in mind?
 
Code: 
<asp:RadioButtonList runat="server" id="radio">
	<asp:ListItem runat="server" id="radio1" Value='1' Text='<%# Eval("top") %>' VerticalAlign="Middle" />
	<asp:ListItem runat="server" id="radio2" Value='2' Text='<%# Eval("bottom") %>' VerticalAlign="Middle" />
</asp:RadioButtonList>

gives `System.Web.UI.WebControls.ListItem' does not contain a definition for `DataBinding'
 
Abandoning RadioButtonList and using RadioButton gets me much closer to where I want to be:

In styles.css

Code: 
img.icon
{
	vertical-align: middle;
}

and in my page

Code: 
<ItemTemplate>
	<asp:RadioButton runat="server" GroupName="t" id="radio1" Value='1' VerticalAlign="Middle" />
	<asp:Image runat="server" ImageURL='<%# Eval("topimg") %>' class="icon" />
	<asp:Label runat="server" VerticalAlign="Middle" Text='<%# Eval("top") %>' />
	<br>
	<asp:RadioButton runat="server" GroupName="t" id="radio2" Value='2' VerticalAlign="Middle" />
	<asp:Image runat="server" ImageURL='<%# Eval("bottomimg") %>' class="icon" />
	<asp:Label runat="server" VerticalAlign="Middle" Text='<%# Eval("bottom") %>' />
</ItemTemplate>
 
Back
Top