Load datas

[matteo]

I'm using the dropdownlist, I don't have any dataSource in .ts file, but I want to replace a select:

I have this:

 <select>

    <option value="1"> Value1 </option>

    <option value="2"> Value2 </option>

    <option value="3"> Value3 </option>

    <option value="4"> Value4 </option>

    <option value="5"> Value5 </option>

</select>

It is possible to replace the select tag with the dropdownList without define an array in the .s file? 

Like this:

<ejs-dropdownlist>

    <ng-template value="1"> Value1 </ng-template>

    <ng-template value="2"> Value2 </ng-template>

    <ng-template value="3"> Value3 </ng-template>

    <ng-template value="4"> Value4 </ng-template>

    <ng-template value="5"> Value5 </ng-template>

</ejs-dropdownlist>

Sometimes I have to interpolate the values to manage translations, so I want to do:

<ejs-dropdownlist>

    <ng-template value="1"> {{translate('Value1')}} </ng-template>

    <ng-template value="2"> {{translate('Value2')}} </ng-template>

    <ng-template value="3"> {{translate('Value3')}} </ng-template>

    <ng-template value="4"> {{translate('Value4')}} </ng-template>

    <ng-template value="5"> {{translate('Value5')}} </ng-template>

</ejs-dropdownlist>

Thanks for your help.

[Sevvandhi Nagulan]

Hello Matteo, 

Greetings from Syncfusion support. 

We checked your query of “rendering dropdownlist using select element without providing the data to the component Yes, we can use the select element to make the dropdownlist component, and the value in the option will be used as data for the component. Also, you can interpolate the items using the custom helper support in the template. For your reference we converted the item values to upper case. Similarly,  you can implement the own functionalities and add the code in custom.js.  Kindly refer the following code. 

[HTML] 

<select id="ddl"> 

    <option value="1"> Value1 </option> 

    <option value="2"> Value2 </option> 

    <option value="3"> Value3 </option> 

    <option value="4"> Value4 </option> 

    <option value="5"> Value5 </option> 

</select> 

 

 

[TS] 

import { DOCUMENT } from "@angular/common"; 

/** 

declare function customHelper(name:any); 

 

export class AppComponent { 

  ngOnInit() { 

    let listObj: DropDownList = new DropDownList({ 

       itemTemplate: "<span>${customHelper(data)}</span>" 

    }); 

    listObj.appendTo("#ddl"); 

  } 

} 

 

 

[custom.js] 

Please find the sample below. 

var customHelper = function (args) {  

    var getDOMString = new ej.base.compile('<span>${convert(text)}</span>', customHelperFunc);  

    let opElem = getDOMString(args);  

    var element = document.createElement('span');  

    element.appendChild(opElem[0]);  

    return element.innerHTML;  

}  

var customHelperFunc = {  

    convert: function convert(str) {  

        return str.toUpperCase();  

    }  

};  

 

 

Please create a custom JS file with the above in the src/assets/js folder to refer the external scripts to the application. Also refer that path in the angular.json file. By doing this, we can add the JavaScript code inside the JS file and call that method in the template for customizing the template items. Refer the below screenshot. 

 

 

Please refer the below link for more information about referring external JS files in the application.   

Reference link: https://www.truecodex.com/course/angular-6/how-to-use-external-js-files-and-javascript-code-in-angular 

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DropDownList-613847999 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N