9/11/08

Radiobuttonlist with images

I looked on the newsgroups to see if anyone had posted anything about this, and i found a few dead-end posts which seemed to conclude that it couldn't be done.
i used a very simple approach that works well, and am posting it here for anyone looking to see how to do it. the requirements are to present a radio-button-list with images instead of just text.


string imageBankFolder = "/ImageBankFolder/Thumbnails/";
DataSet ds = new DB.ImageBank().Select(); // get your dataset from wherever
foreach(DataRow dr in ds.Tables[0].Rows)

this.RadioButtonList1.Items.Add(new ListItem(String.Format("", imageBankFolder + dr["ImageFile"].ToString()), dr["ImageID"].ToString()));



this displays the images only. note: firefox works fine with this, you can click on the image to select it, but IE6 requires you to actually click on the round radio button icon. to work around this, i included some text above the image, which sits beside the button, and it is more intuitive for the user to click the text or the radio icon then. to include some text above the image, try the following:

this.RadioButtonList1.Items.Add(new ListItem(String.Format("{1}
", imageBankFolder + dr["ImageFile"].ToString(), dr["Text"].ToString()), dr["ImageID"].ToString()));

hope this helps someone out there.







OR





foreach (ListItem item in RadioButtonList1.Items)
{
item.Attributes.CssStyle.Add("background-image", "url(radio.jpg)");
}



OR



RadioButtonList1.Items[0].Attributes.CssStyle.Add("background-image", "url(radio1.jpg)");

RadioButtonList1.Items[1].Attributes.CssStyle.Add("background-image", "url(radio2.jpg)");

RadioButtonList1.Items[2].Attributes.CssStyle.Add("background-image", "url(radio3.jpg)")







No comments:

Post a Comment

Welcome