We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

drop down with search

Thread ID:

Created:

Updated:

Platform:

Replies:

145233 Jun 13,2019 06:47 AM UTC Jun 14,2019 09:04 AM UTC Angular 5
loading
Tags: ejDropDownList
thowfik
Asked On June 13, 2019 06:47 AM UTC

i need a drop down  exactly like the platform and control dropdown which you have used 
i have attached the image kindly look at it
Thanks in advance 
Regards 
Thowbik

Attachment: dropdown.png_67d5df09.zip

Prince Oliver [Syncfusion]
Replied On June 13, 2019 07:33 AM UTC

Hi Thowbik, 

Thank you for contacting us. 

We have used our EJ1 DropDownList control with Bootstrap theme in our end. Please find the following links for your reference. 


Let us know if you need any further assistance on this. 

Regards, 
Prince 


thowfik
Replied On June 13, 2019 08:21 AM UTC

i refered all the three links that does not matched with what you have used in platform and control dropdown  in this page(https://www.syncfusion.com/forums/newthread),
i need the  dropdown with search option as same in syncfusion angular

Prince Oliver [Syncfusion]
Replied On June 13, 2019 09:32 AM UTC

Hi Thowfik,  
 
Good day to you. 
 
We have prepared an angular DropDowList sample based on your requirement. We have added custom CSS class name through cssClass property and applied border CSS. We have set enableFilterSearch to true and filterType as “contains” to filter items that contains the search character. Please refer to the following code 
 
[HTML] 
<input id="bookSelect" ej-dropdownlist [dataSource]="data" [fields]="fieldsvalues" [cssClass]="cssclass" width="245px" height="35px"  watermarkText="Select platform" enableFilterSearch="true" filterType="contains"/> 
 
[TS] 
export class AppComponent { 
    data: Array<Object> = []; 
    fieldsvalues: Object; 
    value: string; 
    cssclass = "custom"; 
    constructor() { 
        this.data = [ 
            { skill: 'General Discussion', category: 'General' }, { skill: 'Asp.Net', category: 'Web' },  
             { skill: 'Asp.Net MVC', category: 'Web' }, { skill: 'Asp.Net Core', category: 'Web' }, 
          { skill: 'Angular', category: 'Web' }, { skill: 'Other', category: 'Other Products' }, { skill: 'Metro', category: 'Other Products' } 
        ]; 
        this.fieldsvalues = { dataSource: this.data, text: 'skill', value: 'skill' ,groupBy: 'category'}; 
    } 
} 
 
Sample can be downloaded from the below link 
 
To run the sample , execute npm install and ng serve commands.  
 
Now the filtering DropDownList will be rendered as shown below 
 
 
 
Let us know if you need any further assistance on this. 
 
Regards, 
Prince 


thowfik
Replied On June 13, 2019 11:22 AM UTC

i am geting an error as Can't bind to 'dataSource' since it isn't a known property of 'input'
After that i installed npm i ej-angular2 and imported EJComponents in my module and ts file after that i got an error as
./node_modules/ej-angular2/src/ej/dropdownlist.component.js
Module not found: Error: Can't resolve 'syncfusion-javascript/Scripts/ej/web/ej.dropdownlist.min' 
I think it is in javascript i need a dropdown with same future as asked earlier that supports in Angular 7
Thanks in Advance
Regards
Thowbik

Prince Oliver [Syncfusion]
Replied On June 14, 2019 09:04 AM UTC

Hi Thowfik,  

Good day to you. 

We have provided previous sample with Angular 7 and you can check the package.json file for reference.  We suspect that the Syncfusion JavaScript packages is not installed correctly in your machine which throws the error.  Please ensure the following in your project.  

  1. Whether ej-angular2 folder has Syncfusion DropDownList component files as shown below

 

  1. Ensure whether this has been imported in app.module file as shown below

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { EJ_DROPDOWNLIST_COMPONENTS } from 'ej-angular2/src/ej/dropdownlist.component'; 
import { AppComponent } from './app.component'; 
 
@NgModule({ 
  declarations: [ 
    AppComponent, EJ_DROPDOWNLIST_COMPONENTS 
  ], 
  imports: [ 
    BrowserModule 
  ], 
  providers: [], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { } 

  1. Ensure whether the Syncfusion-javascript packages are installed in the node module folder as shown below

 

You can also install the required packages by following the steps in the below document  

Note:  These packages are mentioned as dependencies of package.json file provided in our previous update.  

Let us know if you need any further assistance on this. 

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon