31

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?

1

5 Answers 5

56

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>
Sign up to request clarification or add additional context in comments.

2 Comments

You have to tell it to 'append' rather than 'replace'
As you said, it's easy to miss :-)
22
<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.

Comments

6

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);
    }

1 Comment

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.
2

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!!!

Comments

1

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.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.