This article explains how to set a predefined selected value of the Angular DropDownList component. DropDownList The Angular DropDownList component is a quick replacement of the HTML select tags. It has a rich appearance, and it allows users to select a single value that is non-editable from a list of predefined values. Refer to this documentation to render the DropDownList component. To render the DropDownList with selected option, you can assign the required field’s text value to the value property as mentioned in the following code example. [app.component.html] <ejs-dropdownlist id='games' [dataSource]='sportsData' [value]='value' [fields]='fields' [placeholder]='waterMark' ></ejs-dropdownlist> [app.component.ts] import { Component } from '@angular/core'; import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns'; @Component({ selector: 'control-content', templateUrl: 'default.html' }) export class DefaultDropDownListComponent { // define the JSON of data public sportsData: Object[] = [ { Id: 'Game1', Game: 'American Football' }, { Id: 'Game2', Game: 'Badminton' }, { Id: 'Game3', Game: 'Basketball' }, { Id: 'Game4', Game: 'Cricket' }, { Id: 'Game5', Game: 'Football' }, { Id: 'Game6', Game: 'Golf' }, { Id: 'Game7', Game: 'Hockey' }, { Id: 'Game8', Game: 'Rugby' }, { Id: 'Game9', Game: 'Snooker' }, { Id: 'Game10', Game: 'Tennis' } ]; // maps the appropriate column to fields property public fields: Object = { text: 'Game', value: 'Id' }; // set the placeholder to DropDownList input element public waterMark: string = 'Select a game'; // set the value to select an item based on mapped value at initial rendering public value: string = 'Game3'; } In the sample above, the text fields ("Game") are assigned to the value property as a string to see the selected option(“Basketball”) in the DropDownList popup for the corresponding value of the assigned text. Run the above code, it will generate the following output in your browser. Screenshot The sample with above mentioned code has been attached. Sample Link: https://stackblitz.com/edit/angular-ugpb2m?file=app.component.ts ConclusionI hope you enjoyed learning about how to set predefined selected value of Angular Dropdown List component.You can refer to our Angular Dropdown List feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular DropDownList example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
By default, AngularJS data grid renders textbox component for all editable columns. Also, it offers the following in-built editor components to edit a column value based on the corresponding column data type. In this article, we are going to render a dropdownlist component while editing a Ship Country column (string column) for this we need to set columns.editType property as 'dropdownedit' for the corresponding column. NumericTextBox Component for integers, double and decimal data types. TextBox Component for string data type. DropdownList Component to show all unique values related to that field. CheckBox Component for Boolean data type. DatePicker Component for date data type. DateTimePicker Component for date time data type. This article explains how to render dropdownlist component for string column instead of default textbox in grid edit mode. HTML <ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar'> <e-columns> <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> <e-column field='CustomerName' headerText='Customer Name' width='120' [validationRules]='customeridrules'></e-column> <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column> <e-column field='OrderDate' headerText='Order Date' width='130' editType='datepickeredit' format='yMd' textAlign='Right'></e-column> <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column> <e-column field='ShipAddress' headerText='Ship Address' width='200'></e-column> </e-columns> </ejs-grid> Component.ts import { Component, OnInit } from '@angular/core'; import { orderDetails } from './data'; import { EditService, ToolbarService} from '@syncfusion/ej2-angular-grids'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', providers: [ToolbarService, EditService] }) export class AppComponent { public data: Object[]; public editSettings: Object; public toolbar: string[]; public orderidrules: Object; public customeridrules: Object; public freightrules: Object; public pageSettings: Object; public editparams: Object; public ngOnInit(): void { this.data = orderDetails; this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode:"Normal"}; this.toolbar = ['Add', 'Edit', 'Delete']; this.orderidrules = { required: true, number: true }; this.customeridrules = { required: true }; this.freightrules = { required: true }; this.editparams = { params: { popupHeight: '150px' }}; } } Console Output Sample : https://stackblitz.com/edit/syncfusion-angular-editable-grid?file=main.ts
A quick start project that helps you to create an Angular 11 Drop Down List with a minimal code configuration. The following section explains the steps required to create a simple Angular 11 Drop Down List component. Project Pre-requisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js (latest version) Angular 11 Angular CLI Typescript 4+ Visual Studio Code for editor Introduction The Angular 11 DropDown list used in this project is created from the Syncfusion ej2-angular-dropdowns package. You can simply define it as <ejs-dropdownlist> within the template. Dependencies Before starting with this project, the Angular 11 DropDown list requires to add the Syncfusion ej2-angular-dropdowns packages from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project To create the Angular project using the Angular CLI tool, follow the steps. Install the Angular CLI application in your machine. npm install -g @angular/cli@11.2.3 Note: If you would like to follow and run the application in Angular6 or Angular5 or Angular4, you need to replace the CLI command version number with the corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Now create a new Angular project by using the command ng new and navigate to that folder. ng new angular11-app cd angular11-app Install the ej2-angular-dropdowns package through the npm install command. npm install @syncfusion/ej2-angular-dropdowns --save npm install @syncfusion/ej2 –save Adding Angular 11 Dropdown List You can add the Angular 11 Dropdown List component by using the ejs-dropdownlist directive. The attributes used within this tag allow you to define other Dropdown List functionalities. To add the Angular 11 Dropdown List, follow the steps: Import the DropDownListModule into the app.module.ts file from the ej2-angular- dropdowns package. Import and inject the other required modules within the providers section of app.module.ts. [app.module.ts] import { BrowserModule, } from '@angular/platform-browser'; import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns’; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, DropDownListModule ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Dropdown List code within the app.component.html file which is mapped against the templateUrl option in the app.component.ts file. [app.component.html] <ejs-dropdownlist></ejs-dropdownlist> Refer to the CDN link of CSS reference within the index.html file. <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Run the application with the ng serve command, and an empty Dropdown List will be displayed on the browser. Now, you can load the Dropdown List with data. Screenshot Loading Data You can populate the empty Dropdown List with data by using the JSON data through the dataSource property. [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { // define the JSON of data public countries: { [key: string]: Object; }[] = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' }, { Name: 'Canada', Code: 'CA' }, { Name: 'Cameroon', Code: 'CM' }, { Name: 'Denmark', Code: 'DK' }, { Name: 'France', Code: 'FR' }, { Name: 'Finland', Code: 'FI' }, { Name: 'Germany', Code: 'DE' }, ]; // maps the local data column to fields property public localFields: Object = { text: 'Name', value: 'Code' }; // set the placeholder to Dropdown List input element public localWaterMark: string = 'Select countries'; } [app.component.html] <ejs-dropdownlist id='localData' #local [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark'></ejs-dropdownlist > ScreenShot Setting initial select value on Dropdown List You can populate the empty Dropdown List with value by binding the string data through the value property initially. [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { public value: string = 'AU'; } Now, assign this value to the value property of Angular Dropdown List within the app.component.html file. [app.component.html] <ejs-dropdownlist id='localData' #local [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark' [value]='value' ></ejs-dropdownlist > Screenshot Getting the selected value on form submit By using the ngModel, you can get the value from the ngform submit. [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { onSubmit(form: NgForm): void { console.log(form.value.name); } } [app.component.html] <form #form='ngForm' (ngSubmit)="onSubmit(form)"> <div class="form-group"> <ejs-dropdownlist id='localData' name='name' #local='ngModel' [(value)]='value'[(ngModel)]='value' [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark'></ejs-dropdownlist> <button type="submit" ejs-button>Submit</button> </div> </form> Run the application with the command ng serve in the command prompt. You can view the Angular Dropdown List output with the data and other settings. Screenshot There are more options to explore with UG Documentation and you can also try to play with the downloadable example link in this knowledge base article.
Grouping in DropDown is possible with the help of SfListView, which is added in the DropDownHeaderView or DropDownFooterView of SfAutoComplete. In SfAutoComplete, you can view the grouped data with the help of SfListView ItemsSource being bound to the FilteredCollection of SfAutoComplete in the DropDownHeaderView or DropDownFooterView. In the following example, the grouping is achieved in SfListView and we have added the SfListView in the DropDownHeaderView of SfAutoComplete. Code snippets [Xaml] <ContentPage.Content> <StackLayout Padding="20"> <autoComplete:SfAutoComplete x:Name="autoComplete" Grid.Row="0" DataSource="{Binding contactsinfo}" DisplayMemberPath="ContactName" DropDownHeaderViewHeight="100" DropDownItemHeight="0" FilteredItems="{Binding FilteredCollection, Mode=TwoWay}" HeightRequest="40" NoResultsFoundTextColor="Gray" SelectedItem="{Binding SelectionObject}" SuggestionBoxPlacement="Bottom"> <autoComplete:SfAutoComplete.DropDownHeaderView> <syncfusion:SfListView x:Name="listView" BackgroundColor="AliceBlue" HeightRequest="800" ItemSpacing="1" ItemTapped="listView_ItemTapped" ItemsSource="{Binding FilteredCollection}" SelectedItem="{Binding SelectionObject}" SelectionMode="Single"> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <Grid x:Name="grid" RowSpacing="0"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Grid RowSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Image HeightRequest="50" HorizontalOptions="Center" Source="{Binding ContactImage}" VerticalOptions="Center" WidthRequest="50" /> <Grid Grid.Column="1" Padding="10,0,0,0" RowSpacing="1" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Label LineBreakMode="NoWrap" Text="{Binding ContactName}" TextColor="#474747" /> <Label Grid.Row="1" Grid.Column="0" LineBreakMode="NoWrap" Text="{Binding ContactNumber}" TextColor="#474747" /> </Grid> <Grid Grid.Row="0" Grid.Column="2" HorizontalOptions="End" RowSpacing="0" VerticalOptions="Start"> <Label LineBreakMode="NoWrap" Text="{Binding ContactType}" TextColor="#474747" /> </Grid> </Grid> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </autoComplete:SfAutoComplete.DropDownHeaderView> </autoComplete:SfAutoComplete> </StackLayout> </ContentPage.Content> Code snippets [C#] public MainPage() { InitializeComponent(); contactsViewModel = new ContactsViewModel(); listView.DataSource.GroupDescriptors.Add(new GroupDescriptor() { PropertyName = "ContactName", KeySelector = (object obj1) => { var item = (obj1 as Contacts); return item.ContactName[0].ToString(); } }); listView.SelectionChanged += ListView_SelectionChanged; autoComplete.SelectionChanged += AutoComplete_SelectionChanged; this.BindingContext = contactsViewModel; } Output Please refer the sample link for reference.
A quick start project that helps you to create an Angular 8 Bootstrap DropDownList component with a minimal code configuration. Angular 8 Bootstrap DropDownList The following section explains the steps required to create a simple Angular 8 Bootstrap DropDownList component. Prerequisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js Angular 8+ Angular CLI TypeScript 2.6+ Visual Studio code for editor Introduction The Angular 8 Bootstrap DropDownList used in this project is created from the Syncfusion ej2-angular-dropdowns package. You can simply define it as <ejs-dropdownlist> within the template. Dependencies Before starting with this project, the Angular 8 Bootstrap DropDownList requires to add the Syncfusion ej2-angular-dropdowns package from npmjs, which is distributed in npm as @syncfusion scoped packages. DropDownList requires the following dependent packages for rendering the DropDownList component. |-- @syncfusion/ej2-angular-dropdowns |-- @syncfusion/ej2-base |-- @syncfusion/ej2-data |-- @syncfusion/ej2-angular-base |-- @syncfusion/ej2-dropdowns |-- @syncfusion/ej2-lists |-- @syncfusion/ej2-inputs |-- @syncfusion/ej2-popups |-- @syncfusion/ej2-buttons The following CSS styles require dependencies to render the DropDownList component in bootstrap theme. @import '../node_modules/@syncfusion/ej2-base/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-angular-dropdowns/styles/bootstrap.css'; Creating Angular project To create the Angular project using the Angular CLI tool, follow the given steps. Install Angular CLI 8 using following command. npm install @angular/cli@8.3.19 Now, create a new Angular project by using the command ng new and navigate to that folder. ng new <project name> cd <project name> Install the ej2-angular-dropdowns package through the npm install command. npm install @syncfusion/ej2-angular-dropdowns --save Adding Angular 8 Bootstrap DropDownList You can add the Angular 8 DropDownList component by using the ejs-dropdownlist directive and the attributes within the tag allows you to define other functionalities. Import the DropDownList module into the Angular application (app.module.ts) from the ej2-angular-dropdowns package. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; //Import the DropDownListModule for the DropDownList component import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'; import { AppCompnent } from './app.component'; @NgModule({ imports: [ BrowserModule, DropDownListModule], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule {} Define the Angular DropDownList code within the app.component.html file mapped against the templateUrl option in app.component.ts file. Here, the DropDownList component is rendered with the dataSource property. [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { //Define the JSON of data public countries: { [key: string]: Object; }[] = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' }, { Name: 'Canada', Code: 'CA' }, { Name: 'Cameroon', Code: 'CM' }, { Name: 'Denmark', Code: 'DK' }, { Name: 'France', Code: 'FR' }, { Name: 'Finland', Code: 'FI' }, { Name: 'Germany', Code: 'DE' }, ]; //Maps the local data column to fields property public fields: Object = { text: 'Name', value: 'Code' }; //Set the placeholder to Dropdown List input element public waterMark: string = 'Select countries'; } [app.component.html] <ejs-dropdownlist id='localData' #local [dataSource]='countries' [fields]='fields' [placeholder]='waterMark'></ejs-dropdownlist > Refer to the CDN link of CSS reference within the styles.css file. @import '../node_modules/@syncfusion/ej2-base/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-angular-dropdowns/styles/bootstrap.css'; Run the application with the command ng serve and a DropDownList with bootstrap theme will be displayed on the browser as follows. Also, you can download and run the sample in this GitHub Repository. For more information about DropDownList functionalities, refer to UG Documentation, API Reference, Feature Tour and Samples section.
A quick start project that helps you to create an Angular 7 Dropdown List with a minimal code configuration. Angular 7 Dropdown List The following section explains the steps required to create a simple Angular 7 Dropdown List component. Project pre-requisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js (latest version) Angular 7+ Angular CLI TypeScript 2.6+ Visual studio code for editor Introduction The Angular 7 Dropdown List used in this project is created from the Syncfusion ej2-angular-dropdowns package. You can simply define it as <ejs-dropdownlist> within the template. Dependencies Before starting with this project, the Angular 7 Dropdown List requires to add the Syncfusion ej2-angular-dropdowns package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular project To create the Angular project using the Angular CLI tool, follow the steps. Install the Angular CLI application in your machine.npm install @angular/cli@7.0.4 Note:If you would like to follow and run the application in Angular6 or Angular5 or Angular4, you need to replace the CLI command version number with the corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Now create a new Angular project by using the command ng new and navigate to that folder.ng new <project name> cd <project name> Install the ej2-angular-dropdowns package through the npm install command.npm install @syncfusion/ej2-angular-dropdowns --save Adding Angular 7 Dropdown List You can add the Angular 7 Dropdown List component by using the ejs-dropdownlist directive. The attributes used within this tag allow you to define other Dropdown List functionalities. To add the Angular 7 Dropdown List, follow the steps: Import the DropDownListModule into the app.module.ts file from the ej2-angular- dropdowns package. Import and inject the other required modules within the providers section of app.module.ts. [app.module.ts] import { BrowserModule, } from '@angular/platform-browser'; import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns’; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, DropDownListModule ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Dropdown List code within the app.component.html file which is mapped against the templateUrl option in the app.component.ts file. [app.component.html] <ejs-dropdownlist></ejs-dropdownlist> Refer to the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Run the application with the ng serve command, and an empty Dropdown List will be displayed on the browser. Now, you can load the Dropdown List with data. Loading data You can populate the empty Dropdown List with data by using the JSON data through the dataSource property. [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { // define the JSON of data public countries: { [key: string]: Object; }[] = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' }, { Name: 'Canada', Code: 'CA' }, { Name: 'Cameroon', Code: 'CM' }, { Name: 'Denmark', Code: 'DK' }, { Name: 'France', Code: 'FR' }, { Name: 'Finland', Code: 'FI' }, { Name: 'Germany', Code: 'DE' }, ]; // maps the local data column to fields property public localFields: Object = { text: 'Name', value: 'Code' }; // set the placeholder to Dropdown List input element public localWaterMark: string = 'Select countries'; } [app.component.html] <ejs-dropdownlist id='localData' #local [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark'></ejs-dropdownlist > Setting initial select value on Dropdown list You can populate the empty Dropdown List with value by binding the string data through the value property initially. [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { public value: string = 'AU'; } Now, assign this value to the value property of Angular Dropdown List within the app.component.html file. [app.component.html] <ejs-dropdownlist id='localData' #local [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark' [value]='value' ></ejs-dropdownlist > Getting the selected value on form submit By using the ngModel, you can get the value from the ngform submit [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { onSubmit(form: NgForm): void { console.log(form.value.name); } } [app.component.html] <form #form='ngForm' (ngSubmit)="onSubmit(form)"> <div class="form-group"> <ejs-dropdownlist id='localData' name='name' #local='ngModel' [(value)]='value'[(ngModel)]='value' [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark'></ejs-dropdownlist> <button type="submit" ejs-button>Submit</button> </div> </form> Run the application with the command ng serve in the command prompt. You can view the Angular Dropdown List output with the data and other settings. There are more options to explore with UG Documentation and you can also try to play with the downloadable example link in this knowledge base article. Downloadable example link: Angular 7 Dropdown List
This knowledge base explains to render the time picker and dropdown list in the button group. It can be achieved by rendering the input element for TimePicker and DropDownList in the Button Group element which contains “e-btn-group” class. It groups the series of input elements together on a single line in button group with some CSS customization. [HTML] <div class="e-btn-group"> <input type='text' id='timePickerElem' /> <input type="text" tabindex="1" id='ddlelement' /> </div> [CSS] /* for icons alignment */ .e-btn-group input { opacity: 1; position: relative; } /* Set border radius for dropdown element */ .e-btn-group .e-ddl { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Set border radius for time picker element */ .e-btn-group .e-time-wrapper { border-top-right-radius: 0; border-bottom-right-radius: 0; } [TS] // creates a timepicker with min and max property let timeObject: TimePicker = new TimePicker({ // sets the min value min: new Date('3/8/2017 9:00 AM'), // sets the max value max: new Date('3/8/2017 11:30 AM'), // sets the value value: new Date('3/8/2017 11:00 AM'), // set the width width: 120, // Disable show clear button showClearButton: false }); timeObject.appendTo('#timePickerElem'); // define the array of data let sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis']; // initialize DropDownList component let dropDownListObject: DropDownList = new DropDownList({ // set the data to dataSource property dataSource: sportsData, // set the placeholder to DropDownList input element placeholder: "Select..", // set the width width: 110 }); // render initialized DropDownList dropDownListObject.appendTo('#ddlelement'); Demo Sample: https://stackblitz.com/edit/vccz48-gpzah9
Description: To set a value beyond the bounded data from remote data. Solution: Create a query based on value and execute the query using Data Manager. The result will be returned in Data Manager’s done method and the item can be added into DropDownList using addItem public method. Then, you can set those value into DropDownList using option or setModel method. Refer to the following code snippet: Javascript: <div>Select a customer</div> <input type="text" id="customerList" /> <script type="text/javascript"> $(function () { // DataManager creation var dataManager = ej.DataManager({ url: "https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Customers" }); // Query creation var query = ej.Query().take(20); $('#customerList').ejDropDownList({ dataSource: dataManager, fields: { text: "CustomerID" ,value:"ContactName"}, query: query, actionComplete:function(args) { var proxy = this; var query = ej.Query().select(this.model.fields.value,this.model.fields.text).where(this.model.fields.value, "equal", "Howard Snyder", false); //query the item with requried value var execute = dataManager.executeQuery(query) // executing query .done(function (e) { if(proxy.popupListItems.indexOf(e.result[0]) < 0) { proxy.addItem(e.result);//add new item based on query result proxy.setModel({value :e.result[0].ContactName});//set value to be selected. } }) } }); }); </script> JSPlayground sample: https://jsplayground.syncfusion.com/t4jpa4mi
You can bind a selected value from the drop-down list using the ngModel and edit it inside the text box or numeric input box. The selected item text and value can be got using the change event of the drop-down list through the args.itemData. To bind this itemData text to the text box and edit the selected text, refer to the following code. App.component.html: <div style="margin: 0px auto; width:250px; padding-top: 40px;"> <label>EJ2 DropDownList</label><br /><br /> <ejs-dropdownlist id='games' #sample [dataSource]='sportsData' (change)='onChange($event)' [(value)]='value' [(text)]='text' [fields]='fields' [placeholder]='waterMark' [popupHeight]='height'></ejs-dropdownlist> <div style="margin-top:15px"> <label>Game Id:</label><br /><br /> <input id="Gvalue" type="number" [(ngModel)]="value" /> </div> <div style="margin-top:15px"> <label>Game Name:</label><br /><br /> <input id="Gtext" type="text" [(ngModel)]="text" /> </div> </div> App.component.ts: import { Component,ViewChild } from '@angular/core'; import { DropDownListComponent } from '@syncfusion/ej2-ng-dropdowns'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { @ViewChild('sample') public ddlObj: DropDownListComponent; // define the JSON of data public sportsData: Object[] = [ { Id: 1, Game: 'American Football' }, { Id: 2, Game: 'Badminton' }, { Id: 3, Game: 'Basketball' }, { Id: 4, Game: 'Cricket' }, { Id: 5, Game: 'Football' }, { Id: 6, Game: 'Golf' }, { Id: 7, Game: 'Hockey' }, { Id: 8, Game: 'Rugby' }, { Id: 9, Game: 'Snooker' }, { Id: 10, Game: 'Tennis' } ]; // maps the appropriate column to fields property public fields: Object = { text: 'Game', value: 'Id' }; // set the height of the popup element public height: string = '220px'; // set the placeholder to DropDownList input element public waterMark: string = 'Select a game'; // set the value to select an item based on mapped value at initial rendering public value: number = 3; //set text for model textbox public text:string='Basketball'; //change event of DropDownList public onChange(args: any): void { this.text=args.itemData.Game; //assign the changed text in DropDownList to textbox } } App.module.ts: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { DropDownListModule} from '@syncfusion/ej2-ng-dropdowns'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; @NgModule({ imports: [ BrowserModule, FormsModule ,DropDownListModule], declarations: [ AppComponent, HelloComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } StackBlitz sample link: https://stackblitz.com/edit/angular-svhivj Output:
If we bound large data source to Grid then Dropdown control popup the list with scroller while editing the JavaScript Grid. In this scenario, users will scroll the Dropdown list to select the appropriate value. It is a tedious process when we bound large data source in Grid and so searching functionality can be enabled in Dropdown. Solution: We can enable the FilterSearch for Dropdownlist while editing the Grid record using actionComplete event of Grid and enableFilterSearch property of Dropdown control. The following code example demonstrates how to enable the Filter search in Dropdown list while editing the Grid record. JS $("#Grid").ejGrid({ dataSource: window.gridData, allowPaging: true, actionComplete:"actionComplete", editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, columns: [ { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 90 }, { field: "CustomerID", headerText: "Customer ID", width: 90 }, { field: "EmployeeID", headerText: "Employee ID", editType: ej.Grid.EditingType.Dropdown, width: 80 }, { field: "Freight", headerText: "Freight", width: 80, format: "{0:C2}" } ] }); MVC @(Html.EJ().Grid<object>("Grid") .Datasource((IEnumerable<object>)ViewBag.datasource) .AllowPaging() /*Paging Enabled*/ .ClientSideEvents(ce => ce.ActionComplete("actionComplete ")) .EditSettings(es => { es.AllowAdding().AllowDeleting().AllowEditing(); }) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(90).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add(); col.Field("EmployeeID").HeaderText("Employee ID").EditType(EditingType.Dropdown).Width(80).Add(); col.Field("Freight").HeaderText("Freight").Width(80).Format("{0:C2}").Add(); })) ASP <ej:Grid ID="Grid" runat="server" AllowPaging="True" > <ClientSideEvents ActionComplete="actionComplete" /> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="90" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" EditType="Dropdown" Width="80" /> <ej:Column Field="Freight" HeaderText="Freight" Width="80" Format="{0:C2}" /> </Columns> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> </ej:Grid> .Net core <ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource" action-complete="actionComplete"> <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"></e-edit-settings> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> <e-columns> <e-column field="OrderID" is-primary-key="true" header-text="Order ID" width="90"></e-column> <e-column field="CustomerID" header-text="CustomerID" width="90"></e-column> <e-column field="EmployeeID" header-text="Employee ID" width="80" edit-type="DropdownEdit"></e-column> <e-column field="Frieght" header-text="Freight" width="80" format="{0:C2}"></e-column> </e-columns> </ej-grid> Angular <ej-grid #grid id="Grid" [dataSource]="gridData" allowPaging="true" (actionComplete)="actionComplete($event)" [toolbarSettings]="toolbarItems" [editSettings]="editSettings"> <e-columns> <e-column field="OrderID" [isPrimaryKey]="true" headerText="OrderID" width="90"></e-column> <e-column field="CustomerID" headerText="CustomerID" width="90"></e-column> <e-column field="EmployeeID" headerText="EmployeeID" editType="dropdownedit" width="80"></e-column> <e-column field="Freight" headerText=" Freight " format="{0:C2}" width="90"></e-column> </e-columns> </ej-grid> TS file @ViewChild('grid') GridModel: EJComponents<any, any>; actionComplete(e:any){ if (e.requestType == "beginedit" || e.requestType == "add") { var gridID = this.GridModel.widget._id;//Get the corresponding Grid ID var dropdownObj = $("#" + gridID+ "EmployeeID").ejDropDownList('instance'); /* Get the object of EmployeeId column ejDropDownList */ dropdownObj.option({enableFilterSearch:true, value: e.rowData.EmployeeID }); /*Enable the filtersearch property to the ejDropDownList control.*/ } JS function actionComplete(args) { if (args.requestType == "beginedit" || args.requestType == "add") { var dropdownObj = $("#" + this._id + "EmployeeID").ejDropDownList('instance'); /* Get the object of EmployeeId column ejDropDownList */ dropdownObj.option({ enableFilterSearch: true, value: args.rowData.EmployeeID });/*Enable the filtersearch property to the ejDropDownList control.*/ } } Output: Conclusion I hope you enjoyed learning about how to enable filter searching in DropDownList editType on Grid column while editing.You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
DropDownList Vs ComboBox Vs Autocomplete Syncfusion has some Editor components that is used for selecting items from a list of items in the websites. The Autocomplete, ComboBox, and DropDownList are similar components with slight variations in the functionalities. Autocomplete: Autocomplete component is a textbox component that shows suggestion list based on the user query. Use Cases: Autocomplete can be used in websites or webapplications where the user wants the list items to be filtered against the text typed in the input area, instead of browsing the complete list items for selection. Multiple columns can be displayed in popup using the multiColumnSettings property. For example, Ticket booking sites with input boxes for choosing origin and destination for journey, searching available products in shopping sites, etc. Target Audience: Developers who needs to develop websites with search options in their websites such as, online shopping and for searching some available services in their sites. ComboBox: ComboBox component is a combination of list box and DropDownList with the editable text box, auto completion, and filtering functionality. Use Cases: ComboBox can be used in websites or webapplications where the users can either search their options in input box or browse with the available options, and the user can able to edit the selected option via input box. This cannot be used in case of multiple selection. It can be used in sites where the user can edit items in input box and enter an option that is not present in the predefined list of items. Target Audience: Developers who needs to develop websites with search options as well as browse with predefined list items in their sites. Chosen value can be edited in ComboBox input box. DropDownList: DropDownList component displays a single column list of items from that the user can make single or multiple selection. Use Cases: DropDownList works well with small or large sets of data. DropDownList can be used in websites or webapplications where the users are limited to some list of choices with non-editable input box. It is advisable to use DropDownList when the list items are few. For example, to choose a certain range of pricing for products with min and max value in shopping sites and to select bus types based on requirement in ticket booking sites. Target Audience: Developers who needs to develop websites with a component that limits the user’s selection with a set of predefined list items with a non-editable input box. Comparison table with features of these components are listed in the following. Features Autocomplete ComboBox DropDownList. Input box Display as well as typing a text Display as well as typing a text Displays the selected text Selection Single or Multiple selection with multiselect mode Single Selection Single or Multiple selection with multiselect mode. Sorting list items with ascending or descending order Supported Supported Supported Grouping Supported Supported Supported Locale Supported Supported Supported Placeholder Supported Supported Supported Query Supported Supported Supported Multiple Selection with Checkbox Not Supported Not Supported Supported Multicolumn Supported Not Supported Not Supported Load on demand Not Supported Not Supported Supported using virtual scroll mode Filtering Option for client-side filtering Option for client-side filtering Options for both client-side and server-side filtering Adding items dynamically Not Supported Supported Supported Autofill Supported Supported Not Supported Template Template to display list with customized appearance actionFailureTemplate, footerTemplate, groupTemplate, headerTemplate, itemTemplate, noRecordsTemplate Customized template and headerTemplate Validation Supported Not Supported Supported Case sensitive search Supported Not Supported Supported Custom Value Supported Supported Not Supported ConclusionI hope you enjoyed learning about how to compare DropDownList vs Combobox vs Autocomplete in JavaScript CompleteTextBox.You can refer to our JavaScript AutoCompleteTextBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript AutoCompleteTextBox example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
DropDownList Vs ComboBox Vs Autocomplete Syncfusion has some Editor components that is used for selecting items from a list of items in the websites. The Autocomplete, ComboBox, and DropDownList are similar components with slight variations in the functionalities. Autocomplete: Autocomplete component is a textbox component that shows suggestion list based on the user query. Use Cases: Autocomplete can be used in websites or webapplications where the user wants the list items to be filtered against the text typed in the input area, instead of browsing the complete list items for selection. Multiple columns can be displayed in popup using the multiColumnSettings property. For example, Ticket booking sites with input boxes for choosing origin and destination for journey, searching available products in shopping sites, etc. Target Audience: Developers who needs to develop websites with search options in their websites such as, online shopping and for searching some available services in their sites. ComboBox: ComboBox component is a combination of list box and DropDownList with the editable text box, auto completion, and filtering functionality. Use Cases: ComboBox can be used in websites or webapplications where the users can either search their options in input box or browse with the available options, and the user can able to edit the selected option via input box. This cannot be used in case of multiple selection. It can be used in sites where the user can edit items in input box and enter an option that is not present in the predefined list of items. Target Audience: Developers who needs to develop websites with search options as well as browse with predefined list items in their sites. Chosen value can be edited in ComboBox input box. DropDownList: DropDownList component displays a single column list of items from that the user can make single or multiple selection. Use Cases: DropDownList works well with small or large sets of data. DropDownList can be used in websites or webapplications where the users are limited to some list of choices with non-editable input box. It is advisable to use DropDownList when the list items are few. For example, to choose a certain range of pricing for products with min and max value in shopping sites and to select bus types based on requirement in ticket booking sites. Target Audience: Developers who needs to develop websites with a component that limits the user’s selection with a set of predefined list items with a non-editable input box. Comparison table with features of these components are listed in the following. Features Autocomplete ComboBox DropDownList. Input box Display as well as typing a text Display as well as typing a text Displays the selected text Selection Single or Multiple selection with multiselect mode Single Selection Single or Multiple selection with multiselect mode. Sorting list items with ascending or descending order Supported Supported Supported Grouping Supported Supported Supported Locale Supported Supported Supported Placeholder Supported Supported Supported Query Supported Supported Supported Multiple Selection with Checkbox Not Supported Not Supported Supported Multicolumn Supported Not Supported Not Supported Load on demand Not Supported Not Supported Supported using virtual scroll mode Filtering Option for client-side filtering Option for client-side filtering Options for both client-side and server-side filtering Adding items dynamically Not Supported Supported Supported Autofill Supported Supported Not Supported Template Template to display list with customized appearance actionFailureTemplate, footerTemplate, groupTemplate, headerTemplate, itemTemplate, noRecordsTemplate Customized template and headerTemplate Validation Supported Not Supported Supported Case sensitive search Supported Not Supported Supported Custom Value Supported Supported Not Supported ConclusionI hope you enjoyed learning about how to compare DropDownList vs Combobox vs Autocomplete in JS platforms.You can refer to our JavaScript DropDown List feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript DropDown List example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
DropDownList Vs ComboBox Vs Autocomplete Syncfusion has some Editor components that is used for selecting items from a list of items in the websites. The Autocomplete, ComboBox, and DropDownList are similar components with slight variations in the functionalities. Autocomplete: Autocomplete component is a textbox component that shows suggestion list based on the user query. Use Cases: Autocomplete can be used in websites or webapplications where the user wants the list items to be filtered against the text typed in the input area, instead of browsing the complete list items for selection. Multiple columns can be displayed in popup using the multiColumnSettings property. For example, Ticket booking sites with input boxes for choosing origin and destination for journey, searching available products in shopping sites, etc. Target Audience: Developers who needs to develop websites with search options in their websites such as, online shopping and for searching some available services in their sites. ComboBox: ComboBox component is a combination of list box and DropDownList with the editable text box, auto completion, and filtering functionality. Use Cases: ComboBox can be used in websites or webapplications where the users can either search their options in input box or browse with the available options, and the user can able to edit the selected option via input box. This cannot be used in case of multiple selection. It can be used in sites where the user can edit items in input box and enter an option that is not present in the predefined list of items. Target Audience: Developers who needs to develop websites with search options as well as browse with predefined list items in their sites. Chosen value can be edited in ComboBox input box. DropDownList: DropDownList component displays a single column list of items from that the user can make single or multiple selection. Use Cases: DropDownList works well with small or large sets of data. DropDownList can be used in websites or webapplications where the users are limited to some list of choices with non-editable input box. It is advisable to use DropDownList when the list items are few. For example, to choose a certain range of pricing for products with min and max value in shopping sites and to select bus types based on requirement in ticket booking sites. Target Audience: Developers who needs to develop websites with a component that limits the user’s selection with a set of predefined list items with a non-editable input box. Comparison table with features of these components are listed in the following. Features Autocomplete ComboBox DropDownList. Input box Display as well as typing a text Display as well as typing a text Displays the selected text Selection Single or Multiple selection with multiselect mode Single Selection Single or Multiple selection with multiselect mode. Sorting list items with ascending or descending order Supported Supported Supported Grouping Supported Supported Supported Locale Supported Supported Supported Placeholder Supported Supported Supported Query Supported Supported Supported Multiple Selection with Checkbox Not Supported Not Supported Supported Multicolumn Supported Not Supported Not Supported Load on demand Not Supported Not Supported Supported using virtual scroll mode Filtering Option for client-side filtering Option for client-side filtering Options for both client-side and server-side filtering Adding items dynamically Not Supported Supported Supported Autofill Supported Supported Not Supported Template Template to display list with customized appearance actionFailureTemplate, footerTemplate, groupTemplate, headerTemplate, itemTemplate, noRecordsTemplate Customized template and headerTemplate Validation Supported Not Supported Supported Case sensitive search Supported Not Supported Supported Custom Value Supported Supported Not Supported
Essential JS2 is a lightweight, touch friendly, and responsive modern toolkit with no external dependencies. EJ2 components are available in four platforms such as: TypeScript, JavaScript, React, and Angular.EJ2 has some editor components that can be used for selecting items from a list of items in websites or webapplication. AutoComplete, ComboBox, DropDownList, and MultiSelect are similar components with slight variations in functionalities.AutoCompleteAutoComplete component is a textbox component that shows suggestion list based on the user query. Use Cases: AutoComplete can be used in websites or webapplication where the user wants the list items to be filtered against the text typed in input area instead of browsing the complete list items for selection. For example, Ticket booking sites with input boxes for choosing origin and destination for journey, searching available products in shopping sites etc. Target Audience: Developers who needs to develop websites with search options in their websites such as online shopping and for searching some available services in their sites. ComboBoxComboBox component is a combination of list box and DropDownList with editable text box, auto completion, and filtering functionality. Use Cases: ComboBox can be used in websites or webapplication where the users can either search their options in input box or browse with the available options, and the user can be able to edit the selected option via input box. This cannot be used in case of multiple selection. It can be used in sites where the user can edit items in input box and enter an option that is not present in the predefined list of items. Target Audience: Developers who need to develop websites with search options as well as browse with predefined list items in their sites. Chosen value can be edited in ComboBox input box. DropDownListDropDownList component displays a single column list of items from that the user can make single selection. Use Cases: DropDownList works well with small or large sets of data. DropDownList can be used in websites where the users are limited to some list of choices with non-editable input box. It is advisable to use DropDownList when the list items are few. For example, to choose a certain range of pricing for products with min and max value in shopping sites and to select bus types based on requirement in ticket booking sites. This cannot be used in case of multiple selection. Target Audience: Developers who needs to develop websites with a component that limits the user’s selection with a set of predefined list items with a non-editable input box. MultiSelectThe MultiSelect component contains a list of predefined values from that the user can make multiple selection. The functionality of MultiSelect resembles the SELECT form element of HTML. Users can also enter an option that is not in the list. The selected items are shown with three different UI modes (Default, Box, and Delimiter). Use Cases: MultiSelect can be used when the user needs to select multiple items from predefined list of items. For example, filtering products based on multiple conditions in shopping sites. Target Audience: Developers who need to develop websites with a component which allows the user to select multiple items from a set of predefined list items with different UI modes. Comparison table with features of these components are listed in the following. Features AutoComplete ComboBox DropDownList. MultiSelect Input box Display as well as typing a text Display as well as typing a text Display the selected text. Display multiple selected items as well as typing a text Selection Single selection Single selection Single selection Multiple selection Filtering Supported Supported Supported Supported Grouping Supported Supported Supported Supported Icons Supported Supported Supported Supported Case sensitive filtering Supported Supported Supported Supported Locale Supported Supported Supported Supported Keyboard Interaction Supported Supported Supported Supported Autofill Supported Supported Not Supported Not Supported Template Item template, Group template, Header template, Footer template, No records template and Action failure template. Item template, Group template, Header template, Footer template, No records template and Action failure template. Item template, Value template, Group template, Header template, Footer template, No records template and Action failure template. Item template, Value template, Group template, Header template, Footer template, No records template and Action failure template. Custom Value Not supported Supported Not supported Supported ConclusionI hope you enjoyed learning about how to compare JavaScript DropDownList vs Combobox vs Autocomplete vs MultiSelect.You can refer to our JavaScript DropDownList feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript DropDownList example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Essential JavaScript Combobox is a lightweight, touch friendly, and responsive modern toolkit with no external dependencies. EJ2 components are available in four platforms such as: TypeScript, JavaScript, React, and Angular. EJ2 has some editor components that can be used for selecting items from a list of items in websites or webapplication. AutoComplete, ComboBox, DropDownList, and MultiSelect are similar components with slight variations in functionalities. AutoComplete AutoComplete component is a textbox component that shows suggestion list based on the user query. Use Cases: AutoComplete can be used in websites or webapplication where the user wants the list items to be filtered against the text typed in input area instead of browsing the complete list items for selection. For example, Ticket booking sites with input boxes for choosing origin and destination for journey, searching available products in shopping sites etc. Target Audience: Developers who needs to develop websites with search options in their websites such as online shopping and for searching some available services in their sites. ComboBox ComboBox component is a combination of list box and DropDownList with editable text box, auto completion, and filtering functionality. Use Cases: ComboBox can be used in websites or webapplication where the users can either search their options in input box or browse with the available options, and the user can be able to edit the selected option via input box. This cannot be used in case of multiple selection. It can be used in sites where the user can edit items in input box and enter an option that is not present in the predefined list of items. Target Audience: Developers who need to develop websites with search options as well as browse with predefined list items in their sites. Chosen value can be edited in ComboBox input box. DropDownList DropDownList component displays a single column list of items from that the user can make single selection. Use Cases: DropDownList works well with small or large sets of data. DropDownList can be used in websites where the users are limited to some list of choices with non-editable input box. It is advisable to use DropDownList when the list items are few. For example, to choose a certain range of pricing for products with min and max value in shopping sites and to select bus types based on requirement in ticket booking sites. This cannot be used in case of multiple selection. Target Audience: Developers who needs to develop websites with a component that limits the user’s selection with a set of predefined list items with a non-editable input box. MultiSelect The MultiSelect component contains a list of predefined values from that the user can make multiple selection. The functionality of MultiSelect resembles the SELECT form element of HTML. Users can also enter an option that is not in the list. The selected items are shown with three different UI modes (Default, Box, and Delimiter). Use Cases: MultiSelect can be used when the user needs to select multiple items from predefined list of items. For example, filtering products based on multiple conditions in shopping sites. Target Audience: Developers who need to develop websites with a component which allows the user to select multiple items from a set of predefined list items with different UI modes. Comparison table with features of these components are listed in the following. Features AutoComplete ComboBox DropDownList. MultiSelect Input box Display as well as typing a text Display as well as typing a text Display the selected text. Display multiple selected items as well as typing a text Selection Single selection Single selection Single selection Multiple selection Filtering Supported Supported Supported Supported Grouping Supported Supported Supported Supported Icons Supported Supported Supported Supported Case sensitive filtering Supported Supported Supported Supported Locale Supported Supported Supported Supported Keyboard Interaction Supported Supported Supported Supported Autofill Supported Supported Not Supported Not Supported Template Item template, Group template, Header template, Footer template, No records template and Action failure template. Item template, Group template, Header template, Footer template, No records template and Action failure template. Item template, Value template, Group template, Header template, Footer template, No records template and Action failure template. Item template, Value template, Group template, Header template, Footer template, No records template and Action failure template. Custom Value Not supported Supported Not supported Supported ConclusionI hope you enjoyed learning about how to compare JavaScript DropDownList, Combobox, Autocomplete and MultiSelect.You can refer to our JavaScript ComboBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript ComboBox example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Essential JavaScript Autocomplete is a lightweight, touch friendly, and responsive modern toolkit with no external dependencies. EJ2 components are available in four platforms such as: TypeScript, JavaScript, React, and Angular. EJ2 has some editor components that can be used for selecting items from a list of items in websites or webapplication. AutoComplete, ComboBox, DropDownList, and MultiSelect are similar components with slight variations in functionalities. AutoComplete AutoComplete component is a textbox component that shows suggestion list based on the user query. Use Cases: AutoComplete can be used in websites or webapplication where the user wants the list items to be filtered against the text typed in input area instead of browsing the complete list items for selection. For example, Ticket booking sites with input boxes for choosing origin and destination for journey, searching available products in shopping sites etc. Target Audience: Developers who needs to develop websites with search options in their websites such as online shopping and for searching some available services in their sites. ComboBox ComboBox component is a combination of list box and DropDownList with editable text box, auto completion, and filtering functionality. Use Cases: ComboBox can be used in websites or webapplication where the users can either search their options in input box or browse with the available options, and the user can be able to edit the selected option via input box. This cannot be used in case of multiple selection. It can be used in sites where the user can edit items in input box and enter an option that is not present in the predefined list of items. Target Audience: Developers who need to develop websites with search options as well as browse with predefined list items in their sites. Chosen value can be edited in ComboBox input box. DropDownList DropDownList component displays a single column list of items from that the user can make single selection. Use Cases: DropDownList works well with small or large sets of data. DropDownList can be used in websites where the users are limited to some list of choices with non-editable input box. It is advisable to use DropDownList when the list items are few. For example, to choose a certain range of pricing for products with min and max value in shopping sites and to select bus types based on requirement in ticket booking sites. This cannot be used in case of multiple selection. Target Audience: Developers who needs to develop websites with a component that limits the user’s selection with a set of predefined list items with a non-editable input box. MultiSelect The MultiSelect component contains a list of predefined values from that the user can make multiple selection. The functionality of MultiSelect resembles the SELECT form element of HTML. Users can also enter an option that is not in the list. The selected items are shown with three different UI modes (Default, Box, and Delimiter). Use Cases: MultiSelect can be used when the user needs to select multiple items from predefined list of items. For example, filtering products based on multiple conditions in shopping sites. Target Audience: Developers who need to develop websites with a component which allows the user to select multiple items from a set of predefined list items with different UI modes. Comparison table with features of these components are listed in the following. Features AutoComplete ComboBox DropDownList. MultiSelect Input box Display as well as typing a text Display as well as typing a text Display the selected text. Display multiple selected items as well as typing a text Selection Single selection Single selection Single selection Multiple selection Filtering Supported Supported Supported Supported Grouping Supported Supported Supported Supported Icons Supported Supported Supported Supported Case sensitive filtering Supported Supported Supported Supported Locale Supported Supported Supported Supported Keyboard Interaction Supported Supported Supported Supported Autofill Supported Supported Not Supported Not Supported Template Item template, Group template, Header template, Footer template, No records template and Action failure template. Item template, Group template, Header template, Footer template, No records template and Action failure template. Item template, Value template, Group template, Header template, Footer template, No records template and Action failure template. Item template, Value template, Group template, Header template, Footer template, No records template and Action failure template. Custom Value Not supported Supported Not supported Supported ConclusionI hope you enjoyed learning about how to compare JavaScript DropDownList, Combobox, Autocomplete and MultiSelect.You can refer to our JavaScript Autocomplete feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript AutoComplete example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Description When DropDownList is set with a PopupWidth and if the text value is longer than the given width, then the text will be wrapped inside the popup element. To prevent DropDownList items text wrapping and get horizontal scroller in popup element, you can set the CSS style “white-space” value as “no-wrap” for the DropDownList items. Solution Define a DropDownList control and bind create event for it. In the create event handler, get the DropDownList object and set the CSS “white-space” as “no-wrap” for all list elements inside the DropDownList. This will prevent the text wrap of DropDownList items. To get the horiziontal Scroller for the popup, set the popup list wrapped width for the Scroller object and refresh() the Scroller. Refer the following code block, HTML <!-- Header section with required references for rendering JavaScript control--> <div>Select a State</div> <input type="text" id="stateList" /> JavaScript $(function () { // declaration var states = [ { index: "s1", countryName: "Alabama" }, { index: "s2", countryName: "Alaska" }, { index: "s3", countryName: "Arizona" }, { index: "s4", countryName: "Arkansas" }, { index: "s5", countryName: "California" }, { index: "s6", countryName: "Colorado" }, { index: "s7", countryName: "Connecticut" }, { index: "s8", countryName: "Delaware" }, { index: "s9", countryName: "Florida" }, { index: "s10", countryName: "Georgia" }, { index: "s11", countryName: "Hawaii" }, { index: "s12", countryName: "Idaho" }, { index: "s13", countryName: "Illinois" }, { index: "s14", countryName: "Indiana" }, { index: "s15", countryName: "Iowa" }, { index: "s16", countryName: "Kansas" }, { index: "s17", countryName: "Kentucky" }, { index: "s18", countryName: "Louisiana" }, { index: "s19", countryName: "Maine" }, { index: "s20", countryName: "Maryland" }, { index: "s21", countryName: "Massachusetts" }, { index: "s22", countryName: "Michigan" }, { index: "s23", countryName: "Montana" }, { index: "s24", countryName: "New Mexico" }, { index: "25", countryName: "New York" }, { index: "26", countryName: "North Carolina" }, { index: "s27", countryName: "Nevada" }, { index: "s28", countryName: "New Jersey" }, { index: "s29", countryName: "Pennsylvania" }, { index: "s30", countryName: "Ohio" }, { index: "s31", countryName: "Oklahoma" }, { index: "s32", countryName: "Oregon" }, { index: "s33", countryName: "Rhode Island" }, { index: "s34", countryName: "South Carolina" }, { index: "s35", countryName: "South Dakota" }, { index: "s36", countryName: "Tennessee" }, { index: "s37", countryName: "Texas" }, { index: "s38", countryName: "Utah" }, { index: "s39", countryName: "Vermont" }, { index: "s40", countryName: "Virginia" }, { index: "s41", countryName: "Washington" }, { index: "s42", countryName: "West Virginia" }, { index: "s43", countryName: "Wisconsin" }, { index: "s44", countryName: "Wyoming" } ]; $('#stateList').ejDropDownList({ width: 100, popupWidth:100, dataSource: states, fields: { id: "index", value: "index", text: "countryName" }, create: function (args) { var dropDownObj = $("#stateList").data("ejDropDownList"); dropDownObj.ultag.children('li').css({ "white-space": "nowrap" }); //To display the horizontal scroller dropDownObj.scrollerObj.model.width = dropDownObj.popupListWrapper.outerWidth(); dropDownObj.scrollerObj.refresh(); } }); }); Output DropDownList items without text wrap, Figure SEQ Figure \* ARABIC 1: Popup element with a horizontal ScrollerConclusionI hope you enjoyed learning about how to prevent text wrap in Dropdown popup when the text content exceeds the popup width.You can refer to our JavaScript DropDown List feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript DropDown List example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Description Strongly-Typed HTML Helper: The DropDownList control supports strongly typed HTML helpers represented by lambda expressions that have model or template passed into the View. The Extension method is used to get a value from the model. Solution The DropDownListFor takes lambda as a parameter that tells the helper with element of the model to use in the typed view. This enables the better compile-time checking of the views that allow you to find errors at build-time instead of at runtime, and also enables better code intelligence support within the view templates. The following steps explain how to get the values by using the Scaffolding methods. Create the model for your requirement. C# public class DropDownListModel { public List<Employee> DropData { get; set; } } public class Employee { public string name { set; get; } public string empID { set; get; } public string desgination { set; get; } public Employee(string ename, string eid, string edesg) { name = ename; empID = eid; desgination = edesg; } } Create an action method that renders UI on the view page, and passes the model to be bound to the view page. C# public ActionResult DropdownlistFeatures() { DropDownListModel model = new DropDownListModel(); model.DropData = "E11011"; BindingData(); return View(model); } public void BindingData() { List<Employee> data = new List<Employee>() { }; data.Add(new Employee("Nancy", "E11011", "Technical Writer")); data.Add(new Employee("Angel", "E11012", "Professor")); data.Add(new Employee("Daniah", "E11013", "Dancer")); data.Add(new Employee("Jenifer", "E11014", "Beautician")); data.Add(new Employee("Prince", "E11015", "Developer")); DropDownListProperties ddl = new DropDownListProperties(); ddl.DataSource = data; DropDownListFields ddf = new DropDownListFields(); ddf.Text = "name"; ddf.Value = "empID"; ddl.DropDownListFields = ddf; ViewData["properties"] = ddl; } Create a strong typed view based on your model. C# @Html.EJ().DropDownListFor(Model => Model.DropData, (Syncfusion.JavaScript.Models.DropDownListProperties)ViewData["properties"]) Create an action method, FormPost that handles the Post request and processes the data. In the action method, you can pass a model as the parameter. That model has UI input field data. C# public ActionResult FormPost(DropDownListModel model) { return View(); } Select the values from the EJ form controls and post the form. You can get the selected values in the post action from the model as follows.
Solution The selection of particular item in the DropDownList can be restricted by using the client side event name called “select”. Initialize the DropDownList as follows Javascript <input type="text" id="selectmailtools" /> <div id="mailtoolslist"> <ul> <li><div class="mailtools categorize"></div>Categorize and Move</li> <li><div class="mailtools done"></div>Done</li> <li><div class="mailtools flag"></div>Flag & Move</li> <li><div class="mailtools forward"></div>Forward</li> <li><div class="mailtools movetofolder"></div>Move to Folder</li> <li><div class="mailtools newmail"></div>New E-mail</li> <li><div class="mailtools meeting"></div>New Meeting</li> <li><div class="mailtools reply"></div>Reply & Delete</li> </ul> </div> When selecting the items in the DropDownList, the select event will be triggered, in that check whether the corresponding item is selected or not. If the particular element is selected, then set the value of the DropDownList as “null”, so that the item cannot be selected as well as if you had set a water mark in the DropDownList, that water mark will be shown. Javascript <script type="text/javascript"> var target; $(function () { $('#selectmailtools').ejDropDownList({ targetID: "mailtoolslist", watermarkText: "Select a icon", width: "100%", select : "onChange" }); }); function onChange(args){ if(args.text=="Done") { this.setModel({value : "null"}); args.cancel = true; } } </script>
Solution Yes, It’s possible to differentiate the selection of items in DropDownList using “isInteraction” argument in the select event of DropDownList. If the value of “isInteraction” is true , then the item has been selected by user interaction. Otherwise it has been selected by properties or methods such as “selectItemByText”, “selectItemByValue” or “selectItemByIndices” in the DropDownList. Initialize the DropDownList as follows HTML <div class="ctrllabel">Select a car</div> <input type="text" id="selectCar" /> <div id="carsList"> <ul> <li>Audi A4</li> <li>Audi A5</li> <li>Audi A6</li> <li>Audi A7</li> <li>Audi A8</li> </ul> </div> <button id="button21">Select</button> var target; $(function () { target = $('#selectCar').ejDropDownList({ targetID: "carsList", width: "150px", select: "onSelect" }).data("ejDropDownList"); $("#button21").ejButton({ showRoundedCorner: true, size: "mini", click: "onClick" }); }); Upon selecting the items in the DropDownList, the client side event “select” will be triggered, in that check whether the value of isInteraction argument is true or not. If the value is true, the item has been selected by user(selected through the mouse hover). Javascript function onSelect(args) { if (args.isInteraction) alert("The item " + args.value + " has been selected by user"); else alert("The item " + args.value + " has been selected programmatically"); } function onClick(args) { target.selectItemByValue("Audi A7"); }
Description By default, getSelectedValue method is used to retrieve the items value that are selected in the DropDownList. It returns the item value in the “string” data type instead of corresponding data type of the item. Solution But, using itemValue property, we can get the selected items as it is. But the “itemValue” property is only applicable for Single Selection mode in the DropDownList. In the following example, upon selecting the items in the DropDownList, the change event will be triggered. In the change event, itemValue will returns the selected value in the DropDownList and the returned value will be in its corresponding data type. For reference, we have added the local method called “toType” which receives the selected value from the DropDownList and returns the data type of the value. Please refer the following code snippet. Javascript
Description: We can able to show the “warning” message, when the disabled items in the DropDownList is hovered. This can be achieved by adding the additional span tag to the “li” elements of the DropDownList in the client side event called “create”. Solution: Render the DropDownList as follows JavaScript <div class="control"> <div class="ctrllabel">Select your skill</div> <input type="text" id="skillsets" /> <button id="btn">Disable</button> </div> <script type="text/javascript"> var target; $(function () { var skillset = [ { skill: "ASP.NET" }, { skill: "ActionScript" }, { skill: "Basic" }, { skill: "C++" }, { skill: "C#" }, { skill: "dBase" }, { skill: "Delphi" }, { skill: "ESPOL" }, { skill: "F#" }, { skill: "FoxPro" }, { skill: "Java" }, { skill: "J#" }, { skill: "Lisp" }, { skill: "Logo" }, { skill: "PHP" } ]; $('#skillsets').ejDropDownList({ dataSource: skillset, fields: { text: "skill" }, showCheckbox: true, enableFilterSearch: true, create : "myFunc" }); $("#btn").ejButton({ showRoundedCorner: true, size: "mini", click : "onClick" }); target = $('#skillsets').data("ejDropDownList"); }); </script> Upon clicking to the Disable button, certain element in the DropDownList will be disabled. JavaScript function onClick(args){ target.disableItemsByIndices("1,3,5,7"); } In the “create” event of DropDownList, we have appended the span element to the all items (li element) in the DropDownList. JavaScript function myFunc(args){ this._getLi().append($("<span class='e-msg e-icon'> </span>")); } When hover to the disable items in the popup wrapper, the warning icon will be shown. In this example, we have used “font icon” for the warning message. Apply the following CSS CSS <style type="text/css" class="cssStyles"> .control { margin-left: 20px; } #btn { margin-left: 200px; } .ctrllabel { padding-top: 15px; } .e-ddl-popup div > ul li.e-disable:hover > span.e-msg:before { float: right; margin-top: 5px; content: "\e64c"; color: red; } </style>
Description Binding the list items as JSON data ASP.NET MVC DropDownList from the client side. Solution You can bind the list of values into the DropDownList by using the dataSource property of the DropDownList. This is explained in the following code example. CSHTML @Html.EJ().DropDownList(“bikeList”).DropDownListFields(df => df.ID(“empid”).Text(“text”)).ClientSideEvents(e => e.Create(“onCreate”)) <script> function onCreate() { BikeList = [ { empid: “bk1”, text: “Apache RTR” }, { empid: “bk2”, text: “CBR 150-R” }, { empid: “bk3”, text: “CBZ Xtreme” }, { empid: “bk4”, text: “Discover” }, { empid: “bk5”, text: “Dazzler” }, { empid: “bk6”, text: “Flame” }, { empid: “bk7”, text: “Fazzer” }, { empid: “bk8”, text: “FZ-S” }, { empid: “bk9”, text: “Pulsar” }, { empid: “bk10”, text: “Shine” }, { empid: “bk11”, text: “R15” }, { empid: “bk12”, text: “Unicorn” } ]; var data1 = $(“#bikeList”).data(“ejDropDownList”); //initializes the Dropdownlist. data1.option(“dataSource”, BikeList); } </script> ConclusionI hope you enjoyed learning how to bind list items as JSON data in MVC DropDownList.You can refer to our ASP.NET MVC Dropdownlist feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to present and manipulate data.For current customers, you can check out ASP.NET Core components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our ASP.NET Core DocIo and other ASP.NET Core components.If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Get selected item in DropDownList from server-side To get the selected item value of the DropDownList control on the post back, use the server-side OnValueSelect event of the DropDownList, so that you can access the DropDownList data in the code behind. The OnValueSelect server-side event triggers the post back when the value of the DropDownList item is changed and maps to the corresponding event handler in the code behind. In the server-side event handler, you can access the value, ID, text, and checked state details by using the DropdownListEventArgs variable. Refer to the following code example. ASPX <ej:DropDownList ID="DropDownList1" runat="server" DataValueField="ParentId" DataTextField="Text" OnValueSelect="DropDownList1_ValueSelect"> </ej:DropDownList> CodeBehind protected void DropDownList1_ValueSelect(object sender, Syncfusion.JavaScript.Web.DropdownListEventArgs e) { string text = e.SelectedText; //SelectedText - Gets the text of the selected item. //Value - Gets the value of the selected item. //ItemId - Gets the ID of the selected item. //IsChecked - Gets the checked status to true or false when check boxes are enabled. }
