We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Dynamically Convert HTML dropdown into Syncfusion Control

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.


3 Replies

UD UdhayaKumar Duraisamy Syncfusion Team October 26, 2022 03:56 AM

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



PD PDev October 30, 2022 09:21 PM

This example does not work. am i missing something ? 



UD UdhayaKumar Duraisamy Syncfusion Team October 31, 2022 01:52 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon