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. Image for the cookie policy date

drop down with search

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

5 Replies

PO Prince Oliver Syncfusion Team 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 



TH thowfik 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


PO Prince Oliver Syncfusion Team 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 



TH thowfik 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


PO Prince Oliver Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon