Adding an item to a Databound DropDownList

There's a few reasons why you might want to add an extra item to a databound dropdownlist. For me, I just wanted to add a prompt at the top. I have a drop down list that allows the user to choose an office in a particular city. I want the first item to read "Choose an office..." or something of the sort.

In ASP.NET 2.0, one way to do this is to add an item on page load:

protected void Page_Load(object sender, EventArgs e)
{

ListItem li = new ListItem("Offices:", null);
OfficesDropDown.Items.Add(li);
}

The problem is, when the data is bound, it overwrites the item(s) you've added on page load.

The solution is quite simple. You need to add AppendDataBoundItems="true" to your DropDownList control.

<asp:DropDownList ID="OfficesDropDown" AppendDataBoundItems="true" runat="server" DataSourceID="OfficesSource" DataTextField="Office" DataValueField="Office">

</asp:DropDownList><asp:SqlDataSource ID="OfficesSource" runat="server" ConnectionString="<%$ ConnectionStrings:vd31653_dbConnectionString %>"

SelectCommand="SELECT [Office], [OfficeID] FROM [Offices]"></asp:SqlDataSource>


Note that you cannot add AppendDataBoundItems="true" to a control skin. You need to add this per control.

Thanks to SPAANJAARS.COM for this solution.

Regular Expressions

Here's a site with a great regular expressions cheat sheet.

If you're anything like me, you find it easy to remember regex syntax until you actually need it, and then suddenly it becomes esoteric knowledge.

Right-Floating div sinking below content

Here's another simple one, and I owe my good friend Nick for drawing my attention to it.

I have a right-floated div that should be aligned with the content on the left, but it's sinking below it, and pushing the div below it down. The div beneath is set to clear:both, but it still isn't working.


The easy solution: in your html code, place the right-floated div before the left-aligned content.

WRONG:

Here's my text<br />
With line breaks<br />
And so on. <br />
<div style="float:right; border: Solid 1px Black">
Hey, why am I down here?
</div>
<div style="clear:both; background-color:#0099FF">
I'm clearing both down here, what gives?
</div>

RIGHT:

<div style="float:right; border: Solid 1px Black">
Hey, why am I down here?
</div>
Here's my text<br />
With line breaks<br />
And so on. <br />
<div style="clear:both; background-color:#0099FF">
I'm clearing both down here, what gives?
</div>

<h1> header tags display differently in IE7 and Firefox

This is a simple one, but still rather frustrating.

If you use the <h1> tag, you'll notice that it display differently in different browsers. You might think it's just the font-size, but if you customize h1 in css, you'll find that the space above and below the text inside the <h1> tags is larger in Firefox than it is in IE7.

It's an easy, if unintuitive fix... specify the margins.

The Solution:


h1
{
font-size: large;
margin-top: 0;
margin-bottom: 1em;
}

How to get transparent backgrounds in an ASP.NET Menu Control's DynamicMenuItem

I'm working on this project currently, and the client wants translucent backgrounds on the drop-down menu.

I'm creating this website in ASP.NET 2.0, using Visual Studio.NET 2005. The menu is dynamically created and added to the page in an empty panel control.

The Problem:

I'm using a skin file and css to control the styles, and although everything is set up correctly, the background of the Dynamic Menu Items is still not translucent when rendered in IE. In Firefox, it renders correctly.

How have I set this up?
In my skin file, notice that the DynamicMenuStyle (the div that contains all of the divs that make up the individual DynamicMenuItems) the BackColor is set to Transparent:

<asp:Menu runat="server" orientation="Horizontal" CssClass="menu" >

<StaticSelectedStyle CssClass="menuItemSelected" />
<StaticMenuItemStyle CssClass="menuItem" />
<DynamicHoverStyle CssClass="dynItemHover" />
<DynamicMenuStyle BackColor="Transparent" />
<DynamicMenuItemStyle CssClass="dynItem" />

</asp:Menu>

In the css, take note that the background-image is set to a semi-transparent png. Since the background of the div containing the Dynamic Menu Items is transparent, the translucent png should show the page behind it:

.dynItem
{
background-image:url(../../images/transpix.png);
border-bottom: solid 1px #EEE;
color: White;
height: 22px;
padding: 1px 15px 0px 5px;
display: block;
width: 100%;
}

The reason this doesn't work is that the rendered html code only ever sets the div that contains the dynamic menu's background-color to white, no matter what you do. I've read that you can override the pre-render function of the control, but honestly, the Menu control ought to just work.

Here's a snippet from the rendered HTML code:

.ctl00_ctl03_0 { background-color:white;visibility:hidden;display:none;
position:absolute;left:0px;top:0px; }

That represents the style of container div that holds the dynamic menu (the bit that pops up when you mouse over the static part).

The Solution:

I initially spent hours searching online only to find nothing of immediate use. All other solutions would added many more hours on to the project.

Eventually, I accidentally found the solution, and it's a simple one. Change the DynamicMenuStyle's Width to zero. The Dynamic Menu Items contained within the div will still display, despite being within a 0-width container. However, the annoying white background disappears.

So, in my skin file, I made this change...

<DynamicMenuStyle BackColor="Transparent" Width="0" />

... et voila, it fucking works.

Obligatory First Post

I program, make and design websites, and use computers constantly. I'm fairly knowledgeable in many IT areas, but an expert in none. So, I run into a lot of frustrating questions and spend hours trying to find the answers.

Sometimes it's relatively easy... I do a quick Google search and find that hundreds of other people have had the same problem and a few people were motivated enough to answer.

Other times, I find unanswered forum posts, or links to pay sites that might have the answer if you're willing to pay. Even more frustrating are people who post snarky answers to the questions that imply the person asking the question should figure out the answer him or herself.

As a disclaimer - and I hope I only have to do this once - I do not claim to be the authoritative answer on anything I post here. All I aim to do is let others know about the solutions I've found. There may be better solutions, and in some cases I might be flat-out wrong, so all advice is welcome.