Dynamically Convert HTML dropdown into Syncfusion Control

[PDev]

Is there some kind of code which I can apply to convert normal HTML dropdown into Syncfusion Dropdown list after page load is complete. 

Looking for some kind of code which can get me started.

[UdhayaKumar Duraisamy]

Hi PDev,

We can convert a normal HTML dropdown into the Syncfusion Dropdown list after the page load as like in the below code snippet. We have achieved the requested requirement using a load event. The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.

var listObj = new ej.dropdowns.DropDownList({

  width: '250px',

  placeholder: 'Select a game',

});

 

window.addEventListener('load', (event) => {

  console.log('page is fully loaded');

  listObj.appendTo('#games');

});

Sample : https://stackblitz.com/edit/uj4ck9?file=index.js,index.html

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Udhaya Kumar D

[PDev]

This example does not work. am i missing something ? 

[UdhayaKumar Duraisamy]

Hi PDev,

We suspect that you are trying to render the Syncfusion Dropdown component while refreshing the page also. We can achieve this requirement by checking the “document.readyState” property. The Document.readyState property describes the loading state of the document.

Please refer to the below sample and the code snippet for more details,

if (document.readyState === 'complete') {

  console.log(document.readyState);

  listObj.appendTo('#games');

}

Sample : https://stackblitz.com/edit/uj4ck9-pfepas?file=index.js,index.html

If we misunderstood the requirement, we request you to provide additional details about the requirement as mentioned below. This will help us validate the requirement further and provide you with a better solution.

1. Exact Requirement details.

2. Please modify the shared sample as per your scenario.

3. Video illustration of the issue.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Udhaya Kumar D