drop down with search

[thowfik]

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]

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. 

Demo links: https://js.syncfusion.com/demos/web/#!/bootstrap/dropdownlist/api's 

UG link: https://help.syncfusion.com/js/dropdownlist/dropdownlist 

API reference: https://help.syncfusion.com/api/js/ejdropdownlist   

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

Regards, 

Prince 

[thowfik]

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]

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 

http://www.syncfusion.com/downloads/support/forum/145230/ze/dropdownlist-996324667  

 

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]

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]

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

 

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

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

https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli#configure-syncfusion-angular-component-in-angular-cli  

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