Tip: Customizing / Adding Image To Radio Button List Control

Today I will share a tip through which 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.