ej-multiselect and ej-dropdown implementation in bootstrap modal

[Ananya Juhi]

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.

<div class="modal-body">

<div class="edit-box">

<div class="">

<div class="col-md-12 form-group">

<label class="addClientLabel" required><span class="required">*</span> Company Name</label>

<ej-dropdownlist id='company' #companyremote [dataSource]='companyData'(select)="onSelectCompany($event)"

[fields]='companyFields'[placeholder]='companyPlaceHolder'

sortOrder='Ascending'>

</ej-dropdownlist>

</div>

<div class="col-md-12">

<div class="col-md-6 col-sm-12 col-xs-12">

<label class="addClientLabel" style="margin: -6px -14px -1px !important"><span class="required">*</span> Client Name</label>

<div class="row margin2-right">

<input type="text" class="form-control" [(ngModel)]="_clientname" placeholder="Client Name">

</div>

</div>

<div class="col-md-6 col-sm-12 col-xs-12">

<label class="addClientLabel" style="margin: -6px -9px -1px !important">Station</label>

<div class="row margin2-left">

<input type="text" class="form-control" [(ngModel)]="_station" placeholder="Stations">

</div>

</div>

</div>

<div class="col-md-12 col-sm-12 col-xs-12" >

<label class="addClientLabel">Markets</label>

<ej-multiselect #marketRemote id='market'[dataSource]='marketData' [(ngModel)]="_marketData"

[fields]='marketFields' [placeholder]='marketPlaceHolder'[mode]='marketBox'

[allowCustomValue]=true sortOrder='Ascending'

(customValueSelection)="customValMarket($event)" (select)="marketSelect($event)"

(removed)="marketDeselect($event)">

</ej-multiselect>

</div>

<div class="col-md-12 col-sm-12 col-xs-12">

<label class="addClientLabel">Formats</label>

<ej-multiselect id='format' [dataSource]='formatData' [(ngModel)]="_formatData"

[fields]='formatFields' [placeholder]='formatPlaceHolder'[mode]='formatBox'

[allowCustomValue]=true sortOrder='Ascending'

(customValueSelection)="customValFormat($event)"(select)="formatSelect($event)"

(removed)="formatDeselect($event)">

</ej-multiselect>

</div>

</div>

</div>

</div>

[Gopi Govindasamy]

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]

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]

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.    

<appComponent.html> 

<button class="btn btn-lg btn-outline-primary" (click)="content.show()">Open Modal</button> 

<custom-selector  #content >  

    <div class="modal-body"> 

     <div class="edit-box"> 

      <div class=""> 

        <div class="col-md-12 form-group"> 

          <label class="addClientLabel">Dropdowns</label> 

          <ej-dropdownlist id='games' #sample [dataSource]='data' [query]='query' [fields]='fields' (open)="onOpen($event)" [placeholder]='waterMark' 

            [popupHeight]='height' [width]="width"></ej-dropdownlist> 

        </div> 

        <div class="col-md-12"> 

          <label class="addClientLabel">Multiselect</label> 

          <ej-multiselect id='remoteData' #remote [dataSource]='data' [fields]='fields' [width]="width" [query]='query' (open)="onOpen($event)" 

            [placeholder]='waterMark'></ej-multiselect> 

        </div> 

      </div> 

      <div class="modal-footer"> 

</custom-selector> 

 

<app.component.ts> 

 

export class AppComponent { 

  closeResult: string; 

 

  @ViewChild('content') content :CustomComponent; 

  constructor(private viewContainerRef: ViewContainerRef, private modalService: NgbModal) { 

  } 

} 

 

<custom.component> 

 

@Component({ 

    selector: 'custom-selector', 

    template: `  

    <ng-template #content> 

  <div class="modal-header"> 

    <h4 class="modal-title">Dropdownlist Sample</h4> 

    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 

    </button> 

  </div> 

  <div class="modal-body">  

    <ng-content select=".modal-body"> </ng-content> 

  </div> 

 

</ng-template> ` 

}) 

export class CustomComponent { 

    closeResult: string; 

    @ViewChild('content') contentTemplate: TemplateRef<any>; 

    @ViewChild('content') 

    public content: CustomComponent; 

    constructor(private modalService: NgbModal) { 

    } 

} 

We have modified the GitHub sample which is shared already with your requirement . Please get the sample from below GitHub location.   

   

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

The above sample not achieves your requirement, please provide us some additional details on your requirement or provide reproducing sample. This would be helpful for us to proceed further.    

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

Regards, 

Gopi G. 

 

[Ananya Juhi]

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]

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. 

<ejs-dropdownlist id='games' #sample [dataSource]='data' [query]='query' zIndex=100001 [fields]='fields' [placeholder]='waterMark' [popupHeight]='height' [width]="width"></ejs-dropdownlist>

<ejs-multiselect id='remoteData' #remote [dataSource]='data' zIndex=100001 [fields]='fields' [width]="width" [query]='query' [placeholder]='waterMark'></ejs-multiselect>

 

 

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]

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]

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]

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 <ejs-dropdownlist></ejs-dropdownlist>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">*</span>  Company </label>

        <ejs-dropdownlist id='company' #companyremote [ERROR ->][dataSource]='companyData'(select)="onSelectCompany($event)"

         [fields]='companyFields'[placeh"): ng:///ClientModule/EditclientComponent.html@8:54

Can'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:9

Can'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'>

        </ejs-dropdownlist>

"): 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. ("   <label class="addClientLabel" required><span class="required">*</span>  Company </label>

        [ERROR ->]<ejs-dropdownlist id='company' #companyremote [dataSource]='companyData'(select)="onSelectCompany($ev"): ng:///ClientModule/EditclientComponent.html@8:8

    at syntaxError (compiler.js:485)

    at TemplateParser.parse (compiler.js:24668)

    at JitCompiler._parseTemplate (compiler.js:34621)

    at JitCompiler._compileTemplate (compiler.js:34596)

    at eval (compiler.js:34497)

    at Set.forEach (<anonymous>)

    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]

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]

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 code

import {

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

<ejs-multiselect #marketRemote id='market' [dataSource]= 'marketData'

[(ngModel)]="_marketData"

[fields]='marketFields' [placeholder]='marketPlaceHolder'[mode]='marketBox'

[allowCustomValue]=true sortOrder='Ascending'

(customValueSelection)="customValMarket($event)" (select)="marketSelect($event)"

(removed)="marketDeselect($event)">

</ejs-multiselect>

[Ilakkiya Baskar]

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]

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]

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]

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]

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]

Price

I 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. ("

    <div>

      <h4>Grouping</h4>

      <ejs-multiselect id='multiselect-grouping' [ERROR ->][dataSource]='vegetableData' [placeholder]='groupWaterMark' [fields]='groupFields'></ejs-multiselect>"): 

[Srinivas]

Prince

issue is resolved, thanks for your support.

[Prince Oliver]

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