Displaying Images with ASP.NET CheckBoxList Control

In this tips I will discuss how you can customize the rendering of ASP.NET CheckBoxList control with images.  Let’s consider a scenarios where you want to show some status images with every checkbox with in a CheckBoxList. Many developers use table with checkbox and images in different cell to display Images with checkbox.  But, we can easily achieve the same using CheckBoxList control itself.

Let’s  consider you have items in a CheckBoxList control.

If you run your web application with above CheckBoxList items, you will get below output

Now you want images instead of the text with the list of checkbox controls. If you look in to the code, as of now, nothing has been written with in NewCheckList_DataBound method.  To enable the adding icon  we have to override the content of items which is being  generating during  data bound. Below is a simple code which will enable to add  icons for every CheckBo  item in the CheckBoxList

What we did is just iterating through each element and override the  item text as per our requirement . Once run, you will get the output as below.

If you want avoid the text, you just need change the override content of item.Text.

So not only the icon, you can add any HTML Content as per requirement

You can do the similar stuff for Radio Button List. Jebarson has a nice tips which talks about the same Tip: Customizing / Adding Image To Radio Button List Control .This tip is just based on that only !