instance of dropdownlist and multiselect list

[Ananya Juhi]

Hi

Could you please tell me how to get the instance of ejs dropdownlist and multiselect ??

I tried doing like the below, 

@ViewChild('dataTableRemote') dataTableInstance: DropDownListComponent; // in the component.ts

console.log(dataTableInstance)

//in the html

<ejs-dropdownlist #dataTableRemote id='dataTableSection' [dataSource]='dataTableSectionData' [fields]='dataTableSectionFields'

(select)='onChangeDataTableSection($event)' sortOrder='Ascending' placeholder="Select a Section"

[value]="_dataTableSection"><!-- [(ngModel)]="_dataTableSection" -->

</ejs-dropdownlist>

when I print the instance, I am getting undefined.

Can you please tell me how to get the instance of dropdownliast here ?

thanks..

[Keerthana Rajendran]

Hi Ananya,   

   

Thank you for contacting Syncfusion Support.   

   

You can get the instance of DropDownList or MultiSelect component once the control has been rendered using the below code.   

   

DropDownList:   

<ejs-dropdownlist id='games' #sample1 [dataSource]='countries' [fields]='localFields'[placeholder]='localWaterMark' [value]='value'></ejs-dropdownlist>   

<div id="multiselect">   

  MultiSelect:   

  <ejs-multiselect id='multiselectelement' #sample [dataSource]='countries' [fields]='localFields'[placeholder]='localWaterMark' [hideSelectedItem] = 'false' [value]='value1'>    

</ejs-multiselect>   

</div>   

<button id="get" (click)="get($event)">Get</button>   

   

   

import { Component,OnInit,ViewChild } from '@angular/core';   

import { MultiSelectComponent,DropDownListComponent} from '@syncfusion/ej2-ng-dropdowns';   

   

@Component({   

  selector: 'my-app',   

  templateUrl: './app.component.html',   

  styleUrls: [ './app.component.css' ]   

})   

export class AppComponent  {   

    @ViewChild('sample')   

    public mulObj: MultiSelectComponent;   

    @ViewChild('sample1')   

    public ddlObj: DropDownListComponent;   

       

    constructor() {   

      

    }   

    public select:boolean=true;   

    //bind the DataManager instance to dataSource property   

      public countries: { [key: string]: Object; }[] = [   

       { Name: 'Australia', Code: 'AU' },   

        { Name: 'Bermuda', Code: 'BM' },   

        { Name: 'Canada', Code: 'CA' },   

        { Name: 'Denmark', Code: 'DK' },   

           

    ];   

    // maps the local data column to fields property   

    public localFields: Object = { text: 'Name', value: 'Code' };   

    // set the placeholder to MultiSelect input element   

    public localWaterMark: string = 'Select countries';   

    public value:string="DK";   

     public value1:Array=["DK"];   

        

   get(event)   

    {   

    console.log( this.ddlObj.value);   

    console.log( this.mulObj.value);   

    }   

       

}   

   

   

We have prepared a sample for your reference. Please refer to the below given link.   

   

https://stackblitz.com/edit/angular-swiwrz   

   

Regards,   

Keerthana.  

 

[Ananya Juhi]

Hi, thanks for the update.

I am able to get the instance on click og the 'get' button.

But,, my requirement is I need the instance when a modal open up and I am unable to get instance inside the modal.

Could you please help me with it??

Thanks...

[Keerthana Rajendran]

Hi Ananya,  

  

We have checked the reported scenario by including DropDownList and MultiSelect inside ejs-dialog modal popup. We can get the instance during opening of Modal through open event. Please refer to the below code used in our sample.  

  

<button (click)="showModal()">Show modal</button>  

<ejs-dialog #modal [isModal] = true [visible]= true [showCloseIcon] = true  width="50%" header="DropDownList and MultiSelect" (open)="onOpen($event)">  

<ejs-dropdownlist id='games' #sample1 [dataSource]='countries' [fields]='localFields'[placeholder]='localWaterMark' [value]='value'></ejs-dropdownlist>     

<div id="multiselect">   

  <ejs-multiselect id='multiselectelement' #sample [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark' [hideSelectedItem] = 'false' [value]='value1'>   

</ejs-multiselect>  

</div>  

<button id="get" (click)="get($event)">Get</button>  

</ejs-dialog>  

  

  

onOpen(event)  

    {  

     console.log("Value on Model Opening:",this.mulObj.value);  

     console.log("Value on Model Opening:",this.ddlObj.value);  

      var instance=document.getElementById("multiselectelement").ej2_instances[0];  

     console.log("MultiSelect Value through instance:" ,instance.value);  

      //get through instance  

     var instance=document.getElementById("games").ej2_instances[0];  

     console.log(" DropDownList Value through instance:" ,instance.value);  

    }  

  

  

  

Please check the below given sample.  

  

https://stackblitz.com/edit/angular-m5h4j7  

  

We can get the instance once the component is rendered. Please check whether the components are rendered when modal popup opened. If the issue persists, kindly modify the above sample to reproduce the issue in our end so that we can proceed further.  

  

Regards,  

Keerthana.