ASP.NET ListBox - Multiple Rows and Columns

Two columns:
  • Afghanistan1
  • Albania2
  • Algeria3
  • American Samoa4
  • Andorra5
  • Angola6
  • Anguilla7
  • Antigua and Barbuda8
  • Argentina9
  • Armenia10
  • Aruba11
  • Australia12
  • Austria13
  • Azerbaijan14
  • Bahamas15
  • Bahrain16
  • Bangladesh17
  • Barbados18
  • Belarus19
  • Belgium20
  • Belize21
  • Benin22
  • Bermuda23
  • Bhutan24
  • Bolivia25
  • Bosnia and Herzegovina26
  • Botswana27
  • Brazil28
  • British Indian Ocean Territory29
  • British Virgin Islands30
  • Brunei31
  • Bulgaria32
  • Burkina Faso33
  • Burma34
  • Burundi35
  • Cambodia36
  • Cameroon37
  • Canada38
  • Cape Verde39
  • Cayman Islands40


Three columns:
  • Afghanistan1
  • Albania2
  • Algeria3
  • American Samoa4
  • Andorra5
  • Angola6
  • Anguilla7
  • Antigua and Barbuda8
  • Argentina9
  • Armenia10
  • Aruba11
  • Australia12
  • Austria13
  • Azerbaijan14
  • Bahamas15
  • Bahrain16
  • Bangladesh17
  • Barbados18
  • Belarus19
  • Belgium20
  • Belize21
  • Benin22
  • Bermuda23
  • Bhutan24
  • Bolivia25
  • Bosnia and Herzegovina26
  • Botswana27
  • Brazil28
  • British Indian Ocean Territory29
  • British Virgin Islands30
  • Brunei31
  • Bulgaria32
  • Burkina Faso33
  • Burma34
  • Burundi35
  • Cambodia36
  • Cameroon37
  • Canada38
  • Cape Verde39
  • Cayman Islands40


Four columns:
  • Afghanistan1
  • Albania2
  • Algeria3
  • American Samoa4
  • Andorra5
  • Angola6
  • Anguilla7
  • Antigua and Barbuda8
  • Argentina9
  • Armenia10
  • Aruba11
  • Australia12
  • Austria13
  • Azerbaijan14
  • Bahamas15
  • Bahrain16
  • Bangladesh17
  • Barbados18
  • Belarus19
  • Belgium20
  • Belize21
  • Benin22
  • Bermuda23
  • Bhutan24
  • Bolivia25
  • Bosnia and Herzegovina26
  • Botswana27
  • Brazil28
  • British Indian Ocean Territory29
  • British Virgin Islands30
  • Brunei31
  • Bulgaria32
  • Burkina Faso33
  • Burma34
  • Burundi35
  • Cambodia36
  • Cameroon37
  • Canada38
  • Cape Verde39
  • Cayman Islands40
The items of the ListBox can be arranged on multiple columns. This can easily be achieved using a small CSS trick:

.ob_iLboICBC li { float: left; width: 125px; }

The ListBox will arrange its items on as many columns as possible, taking the width of the control and the width of the individual items into account.

When arranging the items in multiple columns, your end users will still benefit from the other features of the ListBox: load on demand, virtual scrolling, etc.

"Keep up the great development; you guys are true heroes in the world wild web of .NET programming!"

Maurice Battle

Random testimonial   All testimonials

Products Downloads
obout.com 
obout.com Home 
News 
ListBox Home   
ListBox Home 
Examples - 56
Appearance - 2 
Live Styles 
Different Styles New 
Load on Demand - 3 
Load Items on Demand 
Load Items on Demand with Paging  
Virtual Scrolling  
Multi-Columns - 5 
Grid-like Multi-Columns  
Grid-like Multi-Columns & Tooltips New 
Multiple Rows and Columns  
Load multi Columns on Demand  
State Selector  
Items with Icons - 4 
Items with Icons  
Grid-like Multi-Columns with Icons  
Multiple Rows and Columns with Icons  
Icons from Database New 
Templates - 4 
Item Templates  
Header Templates  
Dynamic Header Templates New 
Populating with Data - 5 
Declarative  
SqlDataSource  
ObjectDataSource  
Generic Collections  
DataSet  
Item Selection - 6 
Single Item Selection  
Multi Item Selection  
Get Selected Item  
Get Selected Items  
Set Selected Item New 
Set Selected Items New 
Master/Detail - 3 
Master/Detail  
Unlimited Detail Levels  
Cascading ListBoxes  
Integration - 8 
Items with ASP.NET CheckBoxes  
Items with Obout CheckBoxes  
Select All ASP.NET CheckBoxes New 
Select All Obout CheckBoxes New 
CheckBoxes on Multiple Columns New 
RadioButtons inside ListBox  
ListBox inside Grid  
Validate with ASP.NET Validators New 
Settings - 3 
AutoPostback  
Height  
Width  
Server-Side API - 4 
Server-Side Events  
Enable / Disable  
Get Values from Multiple Columns New 
Tooltips New 
Client-Side API - 8 
Client-Side Events  
Add / Remove Items  
Add Multi-Column Items New 
Enable / Disable  
Get Selected Item  
Reset Selection New 
Select / Deselect All Items New 
Move Items New 
Appearance Customization - 1 
Aligning Items New 
Knowledge Base - 1 
Knowledge Base 
Documentation - 11 
Server-Side 
ListBox 
ListBoxClientSideEvents 
ComboBoxCssSettings 
ListBoxFooterTemlateContainer 
ListBoxHeaderTemlateContainer 
ListBoxItem 
ListBoxItemEventArgs 
ListBoxItemTemlateContainer 
ListBoxLoadingItemsEventArgs 
Client-Side 
Client-Side API 
ChangeLog 
Tutorials - 2 
Appearance - 1 
CSS Tutorial  
Configuration - 1 
Using the correct path