how to use dropdownlist in template

[Sarathkumar, K (K.)]

Hi Expert,

 How to use dropdownlist in template and call functions in JavaScript (ES5)

Thanks and Regards

Sarathkumar.K

[Farveen Sulthana Thameeztheen Basha]

Hi Sarathkumar, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query and we can place the Dropdownlist as Template column in TreeGrid and you can bind Javascript(ES5) functions from it. Refer to the code example:- 

 

<ejs-treegrid #treegrid [dataSource]='data' height='359' width='auto' childMapping='Children' [treeColumnIndex]='0' > 

        <e-columns> 

            .   .    . 

            <e-column  headerText='Tax per annum' width='90' textAlign='Center'> 

                <ng-template #template let-data> 

                    <ejs-dropdownlist id='games' #sample [dataSource]='sportsData' (change)='onChange($event)' [value]='value' [fields]='fields'></ejs-dropdownlist> 

                </ng-template> 

            </e-column> 

        </e-columns> 

    </ejs-treegrid> 

declare var myMethod: any; 

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.component.html', 

}) 

export class AppComponent { 

    public data: Object[] = []; 

    public sparkData: Object[] = []; 

  public sportsData: Object[] = [ 

        { Id: 'Game1', Game: 'American Football' }, 

        { Id: 'Game2', Game: 'Badminton' }, 

    ]; 

     public fields: Object = { text: 'Game', value: 'Id' }; 

    @ViewChild('treegrid') 

    public treegrid: TreeGridComponent; 

    ngOnInit(): void { 

        this.data = textdata; 

        myMethod(); 

    } 

    public onChange(args: any): void { 

        let value: Element = document.getElementById('value'); 

        let text: Element = document.getElementById('text'); 

    } 

// custom code end 

} 

Demo Link:- https://ej2.syncfusion.com/angular/demos/#/material/grid/column-template 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana  

[Sarathkumar, K (K.)]

Hi ,

Can you please provide sample in EJ5 javascript.

thanks

Sarath

[Farveen Sulthana Thameeztheen Basha]

Hi SarathKumar,

 

We have placed dropdownList as Template column and we have bind events(change event) for the Dropdownlist as like previous update.

 

Sample Link:- https://stackblitz.com/edit/angular-rssubz-mm2hsd?file=app.component.ts

 

Regards,

Farveen sulthana T