BulletedList Control in ASP.NET Framework 4, 3.5, 3.0, 2.0


Here I am trying to show some of the basic functionalities of the powerful asp.net control BulletedList.

BulletedList Control will generate or be rendered into a list of items in a bulleted format, even we can attach an image as bulleted style format. 

BulletedList Control is inherited from ListControl. Here are the list of different Bulleted Styles:

1.gif 

We can even use different CSS list-style of <ul> html tag in BulletedList control. 

For Example: When we use property BulletStyle = "NotSet", it will display default style depending on browser (such as a filled circle). 

If we don't want to see the filled circle we need to apply style="list-style-type: none;". This will fully remove the list style.

2.gif  
 
How to use bullet style "CustomImage"? It's Simple.

Set property BulletStyle="CustomImage" and BulletImageUrl="~/images/1.jpg"; this will display an image next to list text. 

Remember to set proper pixel size for images.

Property DisplayMode --> DisplayMode is used for the display behavior of list items. 

The different types of behavior are Text, LinkButton (event BulletedList.Click is used to post back to the server) and 

Hyper Link (will navigate to a URL from Value assigned to ListItem).

Property FirstBulletNumber --> By setting FirstBulletNumber we can specify the value that starts the numbering of list items in the BulletedList control.


How to create a Horizontal BulletedList?

We need to use css styling by setting display: inline; padding: 0px; margin: 5px; for ul and li tags.

The output will be rendered as horizontal. You can even attach client side event to avoid post back.

3.gif 

On BulletedList.Click we can retrieve the selected value and text.


The attached sample also shows how to fetch records from database and bind to BulletedList Control. 

Download and test the codes. Please update your comments.


Similar Articles