asp.net dropdownlist - add blank line before db values

Question

On my page I have a DropDownList which I populate with database values from an SqlDataSource (see code below).

How can I add my own text or a blank line before the values?

<asp:DropDownList ID="drpClient" runat="server" Width="200px" 
    AutoPostBack="True" DataSourceID="dsClients" DataTextField="name" 
        DataValueField="client_id">
</asp:DropDownList>
<asp:SqlDataSource ID="dsClients" runat="server" 
    ConnectionString="my_connection_string" 
    ProviderName="System.Data.SqlClient" 
    SelectCommand="SELECT [client_id], [name] FROM [clients]">
</asp:SqlDataSource>

Thanks.

P.S. Do you recommend using a SqlDataSource or is it better to populate another way?

Schaper

This relates to: #267564 – Creamery

Answer 1

You can simply add a ListItem inside the DropDownList Markup. All the values from the DataSource will be appended after that.

<asp:DropDownList ID="drpClient" runat="server" Width="200px" 
          AutoPostBack="True" DataSourceID="dsClients" DataTextField="name" 
          DataValueField="client_id" AppendDataBoundItems="true">
   <asp:ListItem>-- pick one --</asp:ListItem>
</asp:DropDownList>

Tolbert

You have to tell it to 'append' rather than 'replace' – Radiophotograph

As you said, it's easy to miss :-) – Tolbert

Answer 2

<asp:DropDownList ID="drpClient" runat="server" Width="200px" 
        AutoPostBack="True" DataSourceID="dsClients" DataTextField="name" 
        DataValueField="client_id" AppendDataBoundItems="True">

    <asp:ListItem Text="" Value="" />
 </asp:DropDownList>

It's easy to miss, so don't forget the AppendDataBoundItems attribute I added.

Radiophotograph

Answer 3

I haven't really tested this but I'm assuming that you could add an item after you have binded the the drop down list. You could add this event to any dropdown list you'd like to add this empty box to.

protected void DropDownList_DataBound(object sender, EventArgs e)
    {
        DropDownList ddl = (DropDownList)sender;
        ListItem emptyItem = new ListItem("", "");
        ddl.Items.Insert(0, emptyItem);
    }

Cowart

Justin - the problem with this way of adding the line is that it is still selectable. If a blank line is added for separation, it should not be selectable by the user. – Mindymine

Answer 4

I solve changing the select command adding an empty option:

        <asp:SqlDataSource ID="dsClients" runat="server" 
            ConnectionString="my_connection_string" 
            ProviderName="System.Data.SqlClient" 
            SelectCommand="SELECT [client_id], [name] FROM [clients] union SELECT NULL, '--- pick one ----' ">
        </asp:SqlDataSource>

Greetings!!!

Nesbitt

Answer 5

In razor-style implementation at me it looks like this:

@Html.EnumDropDownListFor(
    model => model.Privilege.Role,
    "-- Select role --",
    new
    {
        @style = "width: 216px !important",
        @class = "form-control",
        id = "role",
        required = "required"
     })

And in javascript which is executed on load I have this:

function PutDefaultPrivilegePanelListHints() {
    $('#role').val('');
    ...
}

There is also more flexible solution via unobtrusive validation (not to count on HTML5):

$('.required').each(function () { $(this).rules('add', { required: true, messages: { required: '' } }) });

Of course, there is a server-side check, too. I don't think it's a good idea to cope with classes. For instance, everything I show in the page is some class. This class has several enumerable type properties. It would be a nightmare to replicate all those properties, but making them nullable in some additional class as some ones suggested here on stackoverflow.

After all, why should i change my business logic for the sake of some specific markup? Instead, I deal with everything via javascript and some model checks.

Gauntlett