ej-multiselect and ej-dropdown implementation in bootstrap modal

Question

Hello,I am trying to implement the ej-multiselect and ej-dropdown in the bootstrap modal. But I am not able to get the data in the dropdown list or the multiselect list.Could you please take a look at the below code snippet and provide some way to solve my problem.

* Company Name

* Client Name

Station

Markets

Formats

Gopi Govindasamy · Answer

Hi Ananya,

Thanks for using Syncfusion components.

We have analyzed your query. This problem occurred when the z-index value of the element is compared higher to the z-index value of the ej2-dropdownlist and multiselect. We have provided standard z-index values for our components and provided separate “z-index” property to change z-index value in your application. We will include this property in our upcoming release Vol1 2018. which will be rolled out by mid of February.

Until that, we have provided solution in application level using open event by fetching the maximum z-index value in the sample and resetting the z-index value of dropdownlist as shown below.

onOpen(args: any) {

// To fetch the available child elements in body

let elements: Element[] = <NodeListOf<Element> & Element[]>document.querySelectorAll('body > *');

let value: string[] = [];

for (let i = 0; i < elements.length; i++) {

let element = document.defaultView.getComputedStyle(elements[i], null);

if (element.getPropertyValue('position') !== 'static') {

value.push(element.getPropertyValue('z-index') || element.getPropertyValue('zIndex'));// fetching z-index values

}

// fetching maximum z-index value

let index: any = parseInt(Math.max.apply(Math, value));

// setting z-index to calendar popup element

args.popup.element.style.zIndex = index + 1;

}

For your convenience, we have prepared a simple sample based on your scenario. Please get that sample in the below link.

Sample Link: https://github.com/SyncfusionSamples/ej2-ng-dropdowns-zIndex

Please let us know if you have any concern, we will happy to help you.

Regards,

Gopi G.

Ananya Juhi · Answer

Hello,Thanks for providing the temporary solution. I tried implementing it in my code, but I am getting the modal but there are no contents within the modal. I am working in two different components. The "button" on click of which the modal should open is present in one component and the modal that opens is a separate component. I guess, because of different components, the "<ng-template #content let-c="close" let-d="dismiss">" #content(id) is not being identified.Could you please help me with it?

Gopi Govindasamy · Answer

Hi Ananya, We have checked your requirement for ng-template id not being identified. This can be achieved using ViewContainerRef, here we have prepared a sample based on your requirement. In the sample we have create two different components in button click to take the custom component instance using ViewContainerRef. Angular custom tag used to call another component to insert content to model dialog. Please find the code snippet for your reference.

Ananya Juhi · Answer

Hello,I am still not able to implement the ej-multiselect and ej-dropdown in modals.Could you please tell me if the new Vol1 2018 is released yet with the z-index fix and solution??Thanks.

Ilakkiya Baskar · Answer

Hi Ananya, Thank you for contacting Syncfusion Support. We inform you that the zIndex property is included in the Vol 1 2018 release of version 16.1.0.24. We inform you to use zIndex property in MultiSelect and DropDownList control to show popup in the modal dialog. Please refer this code snippet. We have prepared a sample for your reference which can be seen from the following link https://github.com/SyncfusionSamples/ej2-ng-dropdowns-model-zindex Regards Ilakkiya.B

Ananya Juhi · Answer

Hi,

Thank you for the update. But when I tried implementing, it gave the following error,

" Can't bind to 'dataSource' since it isn't a known property of 'ejs-dropdownlist' ".

Could please look into it and provide any fix for it.

Ilakkiya Baskar · Answer

Hi  Ananya, 
We suggest you to check the path of the “syncfusion” in systemjs.config.js file. Please refer the below link, 
https://ej2.syncfusion.com/16.1.24/angular/documentation/drop-down-list/getting-started.html#installation-and-configuration 
We rolled out some breaking changes in the DropDownList source in 16.1.0.24 release. Please refer the link, 
https://github.com/syncfusion/ej2-ng-dropdowns/blob/master/CHANGELOG.md#breaking-changes 
So please update the package version and update the node modules. 
Please let us know if you have any concern, we will happy to assist you.  
Regards  
Ilakkiya.B

Ananya Juhi · Answer

Hi,Thank you so much for the update.I have upgraded my npm, installed the dropdown package and configured the necessary things in app.module.ts. But I am still facing some issues. Somehow, the is not getting recognized. The below error message comes up when I am trying the dropdownlist component.Can't bind to 'dataSource' since it isn't a known property of 'ejs-dropdownlist'.1. If 'ejs-dropdownlist' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.2. If 'ejs-dropdownlist' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("n class="required">* Company ][dataSource]='companyData'(select)="onSelectCompany($event)" [fields]='companyFields'[placeh"): ng:///ClientModule/EditclientComponent.html@8:54Can't bind to 'fields' since it isn't a known property of 'ejs-dropdownlist'.1. If 'ejs-dropdownlist' is an Angular component and it has 'fields' input, then verify that it is part of this module.2. If 'ejs-dropdownlist' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("t id='company' #companyremote [dataSource]='companyData'(select)="onSelectCompany($event)" [ERROR ->][fields]='companyFields'[placeholder]='companyPlaceHolder' sortOrder='Ascending'> <"): ng:///ClientModule/EditclientComponent.html@9:9Can't bind to 'placeholder' since it isn't a known property of 'ejs-dropdownlist'.1. If 'ejs-dropdownlist' is an Angular component and it has 'placeholder' input, then verify that it is part of this module.2. If 'ejs-dropdownlist' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("emote [dataSource]='companyData'(select)="onSelectCompany($event)" [fields]='companyFields'[ERROR ->][placeholder]='companyPlaceHolder' sortOrder='Ascending'> "): ng:///ClientModule/EditclientComponent.html@9:33'ejs-dropdownlist' is not a known element:1. If 'ejs-dropdownlist' is an Angular component, then verify that it is part of this module.2. If 'ejs-dropdownlist' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" * Company [ERROR ->]) at JitCompiler._compileComponents (compiler.js:34497) at eval (compiler.js:34367) at Object.then (compiler.js:474) at JitCompiler._compileModuleAndComponents (compiler.js:34366)Could you please help me with this ??

Ilakkiya Baskar · Answer

Hi  Ananya, 
We analyzed your query. We suggest you to check systemjs.config.js file.  If you want to refer the online package, please change the path accordingly. If you refer the local package from the node modules, please check the path given is correct or not. 
Please refer the following code snippet which is present in systemjs.config.js file, 




paths: { 
        'npm:': 'node_modules/', 
         "syncfusion:": "node_modules/@syncfusion/", //** syncfusion alias, if it is offline package **          "syncfusion:": "https://cdn.syncfusion.com/ej2/", //** syncfusion alias, if it is online package **
    }, 
 
 
 
So please update the package version and update the node modules. 
Please let us know if you have any concern, we will happy to assist you.  
Regards  
Ilakkiya.B

Ananya Juhi · Answer

Hi,I have upgraded the @syncfusion/ej2-ng-dropdowns (version- 16.1.30) package in my application. Previously I had used a custom adaptor while using the ej-multiselect and ej-dropdown.Now, as I have upgraded the ej2-ng-dropdown package, I am facing some issues in the custom adapter(not sure though). Below is my code for the custom adaptor.Please have a look at it.//custom adaptor codeimport { DataManager, ODataV4Adaptor, Query, WebApiAdaptor, ReturnOption, UrlAdaptor} from '@syncfusion/ej2-data';/** * This provides the custom adaptor to process our data as required by Syncfsion */export class AddClientCustomDataAdaptor extends WebApiAdaptor { fetchDataUsingKey: string; constructor( public useKeyToFetchRecord: string) { super(); this.fetchDataUsingKey = useKeyToFetchRecord; } public processResponse(): Object { // calling base class processResponse function const original: any = super.processResponse.apply(this, arguments); if (this.fetchDataUsingKey === '' || this.fetchDataUsingKey == null) { return original; } return original[this.fetchDataUsingKey]; }}//code for multiselect (data fetch through api)private setupMultiSelectDataManager() { this.marketData = new DataManager({ url: environment.api_url + this.marketAPI, adaptor: new AddClientCustomDataAdaptor('infoList'), crossDomain: true, requestType: 'GET', headers: [{ 'sm-xsrf': this.header1 }, { 'x-auth-token': this.header2 }] }); this.marketFields = { text: 'name', value: 'id' }; this.marketPlaceHolder = 'Select Markets'; this.marketBox = 'box'; } //html

Ilakkiya Baskar · Answer

Hi Ananya, 
 
Thank you for your details. 
 
We analyzed your query. We apologize that we couldn’t reproduce the issue you reported.  Please refer the below code, 




class SerialNoAdaptor extends WebApiAdaptor { 
    public processResponse(): Object { 
        let i: number = 0; 
        //calling base class processResponse function 
        let original: Object[] = super.processResponse.apply(this, arguments); 
        //Adding serial number 
        original.forEach((item: Object) => item['Sno'] = ++i); 
        return original; 
    } 
} 
public data: DataManager = new DataManager({ 
        url: 'http://localhost:62779/api/values', // set the localhost url 
        adaptor: new SerialNoAdaptor, 
        crossDomain: true 
    }); 



We have given a sample for your reference which can be seen from the following link 
http://www.syncfusion.com/downloads/support/forum/135781/ze/quickstart-343807715 

You have to run the below sample to get data from the WebAPIController, and place the hosted url in the DataManager url property, 
http://www.syncfusion.com/downloads/support/forum/135781/ze/Incident-dropdownlist-1224946925 

Please ensure this in your end and if issue persists,   
1.kindly send us the screenshot where the error produces. 
 
If possible , modify the above sample to reproduce the issue in your end so that we can proceed further  
 

Regards, 
Ilakkiya B

Srinivas · Answer

Hi

the file you are referring to "We suggest you to check the path of the “syncfusion” in systemjs.config.js file. " is no longer used in angular CLI, I am also getting the same error

Can't bind to 'dataSource' since it isn't a known property of 'ejs-multiselect'.

1. If 'ejs-multiselect' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.

2. If 'ejs-multiselect' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

if I use the example project for multiselect feature it perfectly works fine, I am trying to add this multiselect feature in my existing angular 5 project, it complains.see package.json file:

{
  "name": "admin",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular-devkit/build-angular": "^0.11.3",
    "@angular/animations": "^5.2.10",
    "@angular/common": "5.1.0",
    "@angular/compiler": "5.1.0",
    "@angular/core": "^5.2.11",
    "@angular/forms": "5.1.0",
    "@angular/http": "5.1.0",
    "@angular/platform-browser": "5.1.0",
    "@angular/platform-browser-dynamic": "5.1.0",
    "@angular/router": "5.1.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "@progress/kendo-angular-buttons": "^4.0.0",
    "@progress/kendo-angular-dateinputs": "^2.2.0",
    "@progress/kendo-angular-dropdowns": "^2.1.0",
    "@progress/kendo-angular-excel-export": "^1.0.7",
    "@progress/kendo-angular-grid": "^3.0.0",
    "@progress/kendo-angular-inputs": "^2.2.0",
    "@progress/kendo-angular-intl": "^1.4.0",
    "@progress/kendo-angular-l10n": "^1.1.0",
    "@progress/kendo-data-query": "^1.2.2",
    "@progress/kendo-drawing": "^1.5.2",
    "@swimlane/ngx-datatable": "^11.0.4",
    "@syncfusion/ej2-angular-dropdowns": "^17.1.49",
    "angular-bootstrap-md": "^5.0.5",
    "angular2-chartjs": "^0.4.1",
    "angular2-jwt": "^0.2.3",
    "angular2-notifications": "^1.0.4",
    "bootstrap": "^4.0.0-beta",
    "c3": "^0.4.18",
    "core-js": "^2.4.1",
    "css-animator": "^2.1.1",
    "d3": "^4.12.0",
    "famfamfam-flags": "^1.0.0",
    "font-awesome-scss": "^1.0.0",
    "hammerjs": "^2.0.8",
    "html2canvas": "^1.0.0-rc.1",
    "jspdf": "^1.5.3",
    "ng-click-outside": "^3.0.0",
    "ng-select": "^1.0.0-rc.3",
    "ng2-file-upload": "^1.2.1",
    "ng2-google-charts": "^3.3.0",
    "ng2-toasty": "^4.0.3",
    "ng2-ui-switch": "^1.0.2",
    "ng2-validation": "^4.2.0",
    "ngx-bar-rating": "^1.1.0",
    "ngx-carousel": "^1.3.5",
    "ngx-chips": "^1.5.10",
    "ngx-color-picker": "^5.0.4",
    "ngx-perfect-scrollbar": "^5.0.1",
    "ngx-spinner": "^2.0.0",
    "node-sass": "^4.11.0",
    "npm": "^6.4.1",
    "rxjs": "^5.5.2",
    "screenfull": "^3.3.2",
    "sweetalert2": "^7.0.3",
    "tslib": "^1.9.3",
    "update": "^0.7.4",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^7.1.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "^2.5.54",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "^3.1.3",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "^5.4.1",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "2.8.1"
  }
}

Prince Oliver · Answer

Hi Srinivas,   

Thank you for contacting us. 

The reported issue might occur when the MultiSelectModule hasn’t been imported in the app.module file. Kindly ensure this in your application end. Refer to the following screenshot. 

[app.module.ts] 




  

Reference UG links: 
Getting Started: https://ej2.syncfusion.com/angular/documentation/multi-select/getting-started/?no-cache=1  
Updating packages: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/  

If the issue persists in your end, please share us more information on the issue. This will help us provide a prompt solution. 

Regards, 
Prince

Srinivas · Answer

Prince,thanks for the reply, I am importing the MultiSelectModule in app.module.ts file, I did followed everything in the documentation, but still same issue. do I have to follow the second link to update the packages?import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';

Prince Oliver · Answer

Hi Srinivas,    

Thank you for your update. 

This issue might occur if there are any duplicate packages or incorrect package installation. So we suggest you manually clear the installed packages and update to check this issue. Please let us know if you still face any issues in your end. 

Regards, 
Prince

Srinivas · Answer

PriceI did this exercise for couple of times, see attached screenshot packages are installed fine.I even followed the link to clean up duplicates. error still persists? is there any angular version issue? when I open the multiselect component page, it shows these errors:Can't bind to 'dataSource' since it isn't a known property of 'ejs-multiselect'.1. If 'ejs-multiselect' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.2. If 'ejs-multiselect' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

Grouping

][dataSource]='vegetableData' [placeholder]='groupWaterMark' [fields]='groupFields'>"):

Srinivas · Answer

Princeissue is resolved, thanks for your support.

Prince Oliver · Answer

Hi Srinivas,     

Most Welcome. We are glad that the issue is resolved in your end. Let us know if you need any further assistance on this. 

Regards, 
Prince