ASP.Net Gridview

How to build a Horizontal List using an 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. repeater is a very simple control which just repeats the items defined in the ItemTemplate. It does not add anything other than this. This gives us more possibilities in generating the code as we like. And for this menu we don’t need any paging or runtime sorting options. So with a little CSS and JavaScript we are ready to use the horizontal menu we created.

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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: