Images in RadioButtonList instead of text
-
I need to display images within a radiobuttonlist as items instead of text. The radiobuttonlist is being created within a DataGrid during a call to ItemDataBound.
-
I need to display images within a radiobuttonlist as items instead of text. The radiobuttonlist is being created within a DataGrid during a call to ItemDataBound.
Hi there, Basically, you are only able to associate each individual ListItem of a RadioButtonList control with some text, and there's no way to attach an image to a ListItem. However, we can cheat here to achieve that thanks to the ListItem's Text property, by this I mean we can assign an image to a ListItem as below:
listItem.Text = "<img src='images/image1.gif'/>";
The sample code below demonstrates how to build a RadioButtonList in the ItemDataBound event based on the above approach.
private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
RadioButtonList list = BuildImageRadioButtonList();//The RadioButtonList is added to the first column of each row of a DataGird.
e.Item.Cells[0].Controls.Add(list);
}private RadioButtonList BuildImageRadioButtonList()
{
RadioButtonList list = new RadioButtonList();
int listItemNumber = 3; //For the moment, there are 3 items for each list
for(int index=0; index<listItemNumber; index++)
{
string imageUrl = "images/image1.gif"; //You can define a different image for each ListItem.
string itemValue = "ListItem" + index;
ListItem item = GetImageListItem(itemValue, imageUrl);list.Items.Add(item);}
return list;
}private ListItem GetImageListItem(string itemValue, string imageUrl)
{
string itemText = "<img onclick='ImageRadio_OnClick(this);' src='" + imageUrl + "'/>";return new ListItem(itemText, itemValue);
}As you know that when you click the label, the onclick event also fires on the radio element specified by the for property of the label. However, this will not happen when you use an image, so to get it back to normal you are required to provide some client-side script to process when the user clicks on the image. The sample code looks something like this:
function ImageRadio_OnClick(obj)
{
var label = obj.parentElement;
var radioid = label.htmlFor;
window.document.getElementById(radioid).click();
}You can place this function right on the page or use the server-side code to emit the script in the code-behind. In fact, you can associate an image object with a RadioButton, in this case you don't use a RadioButtonList and group a set of individual RadioButton thanks to the GroupName property.
-
Hi there, Basically, you are only able to associate each individual ListItem of a RadioButtonList control with some text, and there's no way to attach an image to a ListItem. However, we can cheat here to achieve that thanks to the ListItem's Text property, by this I mean we can assign an image to a ListItem as below:
listItem.Text = "<img src='images/image1.gif'/>";
The sample code below demonstrates how to build a RadioButtonList in the ItemDataBound event based on the above approach.
private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
RadioButtonList list = BuildImageRadioButtonList();//The RadioButtonList is added to the first column of each row of a DataGird.
e.Item.Cells[0].Controls.Add(list);
}private RadioButtonList BuildImageRadioButtonList()
{
RadioButtonList list = new RadioButtonList();
int listItemNumber = 3; //For the moment, there are 3 items for each list
for(int index=0; index<listItemNumber; index++)
{
string imageUrl = "images/image1.gif"; //You can define a different image for each ListItem.
string itemValue = "ListItem" + index;
ListItem item = GetImageListItem(itemValue, imageUrl);list.Items.Add(item);}
return list;
}private ListItem GetImageListItem(string itemValue, string imageUrl)
{
string itemText = "<img onclick='ImageRadio_OnClick(this);' src='" + imageUrl + "'/>";return new ListItem(itemText, itemValue);
}As you know that when you click the label, the onclick event also fires on the radio element specified by the for property of the label. However, this will not happen when you use an image, so to get it back to normal you are required to provide some client-side script to process when the user clicks on the image. The sample code looks something like this:
function ImageRadio_OnClick(obj)
{
var label = obj.parentElement;
var radioid = label.htmlFor;
window.document.getElementById(radioid).click();
}You can place this function right on the page or use the server-side code to emit the script in the code-behind. In fact, you can associate an image object with a RadioButton, in this case you don't use a RadioButtonList and group a set of individual RadioButton thanks to the GroupName property.
Thank you very much for the time you took to explain this to me! It is greatly appreciated.
-
I need to display images within a radiobuttonlist as items instead of text. The radiobuttonlist is being created within a DataGrid during a call to ItemDataBound.
If you are already dynamically creating your radio button list within the ItemDataBound event, you should be able to do something like the following: VB.Net
Dim myImage as System.Web.UI.WebControls.Image = new System.Web.UI.WebControls.Image myImage.ImageUrl = "http://www.google.com/images/logo_sm.gif" e.Item.Controls.Add(myImage)C#System.Web.UI.WebControls.Image myImage = new System.Web.UI.WebControls.Image(); myImage.ImageUrl = "http://www.google.com/images/logo_sm.gif"; e.Item.Controls.Add(myImage);Levi Rosol Blog By Levi[^] Two Rivers Marketing[^]