Need Help with Generating Dynamic Masonry Grid Component | Community
Skip to main content
M
Mohammed-Skouti
Level 3
August 13, 2024
Solved

Need Help with Generating Dynamic Masonry Grid Component

  • August 13, 2024
  • 1 reply
  • 671 views

I'm working on a project where I need to create a masonry grid component that can dynamically add rows, with each row displaying different types of components. For example, if an editor adds a row and selects two components, the grid should generate two side-by-side containers, and each container should be capable of having additional components added inside.

The issue I'm facing is that when adding containers using data-sly-resource, the containers end up with the same ID, which causes them to behave as if they are cloned any components added to one container appear in all of them.

Has anyone encountered a similar issue or have any advice on how to properly manage unique IDs for these containers to ensure they work independently?

<div class="cmp-masonryGrid bootstrap" data-sly-use.model="com.xxxx.core.models.MasonryGrid" data-cmp-is="masonryGrid" data-cc-name="ctaevent" data-cc-componentname="column" data-cc-componentgroup="content"> <div class="container"> <sly data-sly-list.row="${model.getRows}"> <div class="masonryGrid-row masonryGrid-${row.rowVersion}"> <div data-sly-list.column="${row.range}" style="display: grid; grid-template-columns: repeat(${row.rowVersion @ context='styleString'} , 1fr);"> <sly data-sly-resource="${column @ resourceType='core/wcm/components/container/v1/container'}"></sly> </div> </div> </sly> </div> </div>



This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by MukeshYadav_

Hi @mohammed-skouti ,

Try below code should be working

 

 

 

<div class="cmp-masonryGrid bootstrap" data-sly-use.model="com.xxxx.core.models.MasonryGrid" data-cmp-is="masonryGrid" data-cc-name="ctaevent" data-cc-componentname="column" data-cc-componentgroup="content"> <div class="container"> <sly data-sly-list.row="${model.getRows}"> <div class="masonryGrid-row masonryGrid-${row.rowVersion}"> <div data-sly-list.column="${row.range}" style="display: grid; grid-template-columns: repeat(${row.rowVersion @ context='styleString'} , 1fr);"> <sly data-sly-test.resourceNode="cmp-${resource.path.hashCode}-${rowList.count}${columnList.count}"></sly> <div data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" data-sly-resource="${resourceNode @ resourceType='core/wcm/components/container/v1/container'}"></div> </div> </div> </sly> </div> </div>

 

 

 

<sly data-sly-test.resourceNode="cmp-${resource.path.hashCode}-${rowList.count}${columnList.count}"></sly>

<sly data-sly-resource="${resourceNode @ resourceType='core/wcm/components/container/v1/container'}"></sly>
 
hashCode- ensure unique per component(in case multiple component authored on same page)
rowList.count & columnList.count will be unqiue for each iteration
So we can keep cumulatively formed string name as resource node name. 
 

Thanks

1 reply

MukeshYadav_
Community Advisor
MukeshYadav_Community AdvisorAccepted solution
Community Advisor
August 13, 2024

Hi @mohammed-skouti ,

Try below code should be working

 

 

 

<div class="cmp-masonryGrid bootstrap" data-sly-use.model="com.xxxx.core.models.MasonryGrid" data-cmp-is="masonryGrid" data-cc-name="ctaevent" data-cc-componentname="column" data-cc-componentgroup="content"> <div class="container"> <sly data-sly-list.row="${model.getRows}"> <div class="masonryGrid-row masonryGrid-${row.rowVersion}"> <div data-sly-list.column="${row.range}" style="display: grid; grid-template-columns: repeat(${row.rowVersion @ context='styleString'} , 1fr);"> <sly data-sly-test.resourceNode="cmp-${resource.path.hashCode}-${rowList.count}${columnList.count}"></sly> <div data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" data-sly-resource="${resourceNode @ resourceType='core/wcm/components/container/v1/container'}"></div> </div> </div> </sly> </div> </div>

 

 

 

<sly data-sly-test.resourceNode="cmp-${resource.path.hashCode}-${rowList.count}${columnList.count}"></sly>

<sly data-sly-resource="${resourceNode @ resourceType='core/wcm/components/container/v1/container'}"></sly>
 
hashCode- ensure unique per component(in case multiple component authored on same page)
rowList.count & columnList.count will be unqiue for each iteration
So we can keep cumulatively formed string name as resource node name. 
 

Thanks

    Terms & ConditionsAccessibility statement

    Loading footer...