Displaying Images with ASP.NET CheckBoxList Control

By | July 7, 2011

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.

image

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

image

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

image

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.

image

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

image

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 !

2 thoughts on “Displaying Images with ASP.NET CheckBoxList Control

  1. Anbuselvan

    hello sir,

    i run above coding in my system. i have problem to display image in web image

  2. Abhijit Post author

    Hi, Please let me know what is the problem ? do you have images in proper location ?

Comments are closed.