Editable Dropdown in C#

c# asp.net drop-down-menu webforms

25,908

Another solution is as follows
You could use the Ajax Control Toolkit Nuget

Step 1: Add the Ajax Control Toolkit from the Nuget Packages in your references

Step 2: If you do not get the Ajax Control Toolkit controls into your Toolbox, you need to create a separate Tab and name it Ajax Toolkit Controls.
Then right click on it and select choose items.
Browse to location where the Ajax Control Toolkit's dll is located, select it.
You will see set of controls getting populated into the window.
Select Ok, this will result into populating the tab with the Ajax Control Toolkit Controls.

Step 3: Since Ajax Toolkit Controls are an extra add-on package, you need to register them as a part of the page using them.If installed as a nuget, this step can be neglected.

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

Note: The tagprefix should match the tagprefix used by you in your program for the AjaxControlToolkit Controls.

Step 4: Add the ScriptManager Control, It is required for providing support for client-side AJAX features. As a result it loads and registers the Microsoft AJAX library to enable the features.

<asp:ScriptManager ID="ScriptManager1" runat="server" />

Step 5: Proceed by adding the ComboBox from the toolbox and configure it by linking it to your database using the SQLDataSource

The complete source code is as follows

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxComboboxSample.aspx.cs" Inherits="StacksEmptied.AjaxComboboxSample" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
        #ComboBox1_ComboBox1_OptionList {
            width: 10% !important;
        }
    </style>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <ajaxToolkit:ComboBox ID="ComboBox1" AppendDataBoundItems="True" runat="server" AutoCompleteMode="Suggest" DataSourceID="SqlDataSource1" DataTextField="Fruits" DataValueField="Fruits" MaxLength="0" Style="display: inline;">
            </ajaxToolkit:ComboBox>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:FruitsConnectionString %>" SelectCommand="SELECT * FROM [Fruits]"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

I have tested this code on all the below settings Testing Environment:
Chrome Browser Version 43.0.2334.0 dev-m (64-bit)
Internet Explorer 11
Firefox 36.0.1
Visual Studio 2013 edition

25,908

Author by

user1698232

Updated on July 21, 2022

Comments

user1698232 almost 2 years

I need to create a dropdownlist where in the user can select a value from the dropdownlist or type the value in.

Exactly like the "Where do you come from ? " dropdown in the below link :

http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html

I know it is a common question and there are similar queries on stack overflow as well but I couldn't find a simple working solution.

I have referred the following links :

http://www.codeproject.com/Articles/8578/Editable-Dropdown-DHTML-Behavior http://www.codeproject.com/Articles/290218/Custom-ASP-NET-Editable-DropDownList http://codeverge.com/asp.net.web-forms/editable-dropdown-list-c/392261

Has anyone worked on this before and give me an idea as to how I can proceed ?
user1698232 about 9 years

Is it possible for the values to come from a database ?
Shadab K about 9 years

Yes, to get them from the database, you have to query them from the database in C# using a WCF/.asmx WebService and append them as JSON to the dropdown via a WebMethod in C#
user1698232 about 9 years

Oh my God ! I don't know WCF and JSON. There is no other approach to it?
user1698232 about 9 years

It gives me an error : Error 5 The type or namespace name 'ComboBox' does not exist in the namespace 'AjaxControlToolkit' (are you missing an assembly reference?)
Shadab K about 9 years

Have you included AjaxControlToolkit in your references? If not try once more installing the entire AjaxControlToolkit that comes along with other tools and packages in the Nuget market.