Menu
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 ?
720
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
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
