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 cant find anything like this anywhere on the web makes me think that everyone does this kind of thing in some other manner and that its 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]

Ill try to recreate my failed attempts.

---

This attempt generated

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

This doesnt 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 didnt have any luck with that either.

 

[Nate Bross]

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

 

[lordbah]

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

I have no idea. Cant 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 dont know if its 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>