Tip: Customizing / Adding Image To Radio Button List Control

By | March 8, 2011

This tips discuss how you can customize the way your RadioButtonList control will look. Below is a simple code which will enable to add me icons for the radio buttons in the list.

 protected void ErrorPriority_DataBound(object sender, EventArgs e)
        {
            try
            {
                foreach (ListItem item in this.ErrorPriority.Items)
                {
                    Priority priority = this.GetErrorPriority(item.Value);
                    item.Text = string.Format("<img src = \"{ 0}\" / > {1} - {2}, this.GetErrorPriorityIconUrl(priority), priority.Order, priority.Name);
                }
            }
            catch (Exception ex)
            {
                this.DisplayError(ex.Message);
            }
        }


So, as above we are trying to loop through the radio buttons to which the data is bound. RadioButtonList is nothing but a set of radio buttons which has the same group. But, the advantage point is that you will be able to enumerate it as ListItem.

In the above scenario we are adding a icon for every radio button through a html img tag and also append it with a text. So below is how our output will look like.

Similarly you can have any scripts / html content added to make your control look better.

Shared by : Jebarson Jebamony
Original Source : http://bit.ly/e1oF4m

Author: Jebarson

Jebarson is a consultant at Microsoft. In his overall experience of 7+ years, his expertise ranges from VB6, COM / DCOM, .net, ASP.net, WPF, WCF, SL, SQL. He has a greater love for OOA / OOD and SOA. His current focus is on Azure, Windows Phone 7, Crm and much more. He is also a frequent speaker of different community events. He blogs at http://www.jebarson.info/ . You can follow him at @Jebarson007 . Jebarson having good set of tutorials written on Windows Azure, you can found them http://bit.ly/houBNx . He is a contributor of this site and shared many tips and tricks.