Javascript getElementsByClassName or getQuerySelectorAll not getting all element
Application Type
Reactive

Hi All,

I am creating a custom drag and drop functionality using vanilla js, which is working fine except with the elements that has a class name of 'dragitem' aren't being retrieve.

I've put the js code on OnRender event.

The page has 15 total elements to retrieve, but getElementsByClassName or getQuerySelectorAll can only get 6 elements. Seems like, the js code runs before all the elements are being rendered.

Thanks!

mvp_badge
MVP
Solution

Hi Esrom,

It's something to do with the List Widget disable-virtualization property. Set the disable-virtualization property value to True as shown below.

See this sample screen: Drag&Drop

I hope this helps you!


Kind regards,

Benjith Sam

Have you tried the OnReady event

Yes, and everything cannot be be retrieved on OnReady.
DragAndDrop.oml

mvp_badge
MVP
Solution

Hi Esrom,

It's something to do with the List Widget disable-virtualization property. Set the disable-virtualization property value to True as shown below.

See this sample screen: Drag&Drop

I hope this helps you!


Kind regards,

Benjith Sam

This works like magic. Thanks, Benjith. May I know the purpose of that?

Thanks!

mvp_badge
MVP

You're welcome, Esrom. Glad to help you :)

Sorry! To be honest, I don't know what exactly happens under the hood because of virtualization, but as per my understanding, the List virtualization concept is related to the List scroll experience. Maybe because of it being enabled by default, it delayed the complete list item rendering (based on the dynamically computed threshold value).

Related documentation doesn't explains much about this. Still you can have a look to this link Designing_Screens/List


Kind regards,

Benjith Sam 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.