How to build a Horizontal List using an ASP.net Repeater
Posted by VB on February 3, 2011
Have you ever tried generating a horizontal list in ASP.Net? There is no control in ASP.Net which natively supports this (to my knowledge). Radio button list supports the list’s orientation as horizontal. But you can not use radio button list for a menu. I am trying to use a repeater to fabricate the menu so that you can add the other onClick events later to bind to the respective actions.
Why ASP.Net over the other data controls.
Bind the Data
Please refer to the data controls section for how to connect the data and bind the data controls. I am just skipping those areas, since I have explained in few articles in the earlier days in detail.
Constructing a menu
To get a menu we need two divs. One is the outer div(we call it as OuterPanel) and another one is the div used for each menu item. So we place the repeater inside the OuterPanel. Let the repeater handle the placing of inner divs(we call as ItemPanel). After assigning the proper class names, the application is ready to run.
If you run at this stage you will notice that the ItemPanels are placed vertically. That is the default behaviour of the divs. They don’t sit horizontally. To bring the menu items floating next to each other we need to use the property float:left for the menu items.
Fixing few for a decent looking menu
At this stage if you run, you can notice the ItemPanels are overlapping the OuterPanel. This is due to the float:left assigned to the ItemPanels. To fix this you can add float:left to the OuterPanel. Apply some padding, margin, background the menu will look decent.
For Screen capture and the source code visit Asp.Net Repeater Horizontal List Menu