ListItem with image and text?

[lordbah]

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?

[Nate Bross]

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.

[lordbah]

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.

 

<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

 

				<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]

I don't know if <ListItem> supports controls inside of it; can you use some sort of TemplateItem inside the <RadioButtonList>?

[lordbah]

I don't know if <ListItem> supports controls inside of it; can you use some sort of TemplateItem inside the <RadioButtonList>?

 

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?

[lordbah]

<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'

[lordbah]

Abandoning RadioButtonList and using RadioButton gets me much closer to where I want to be:

 

In styles.css

 

img.icon
{
vertical-align: middle;
}

 

and in my page

 

<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>