Kentico Hierarchical Transformation layout with foundation grids

Hi,

So I suppose this would be some kind of menu structure? How would that work if childnode2 has 2 subchilds and childnode1 hasn't.

You wouldn't be able to get that because they aren't nested or have any reference to the parent.

I have no experience with foundation grids but if I look at a random template, They use a nested view for the menu:

https://foundation.zurb.com/templates-previews-sites-f6-xy-grid/news-magazine.html

If you still want to use the setup you mentioned you might want to have a look at a normal repeater, since you don't want to use the hierarchy, better not use a 'Hierarchical viewer'. In a repeater you can order your items by just "NodeLevel" that should group level 1 together with level 2 etc.

I agree with David, if you don't want the hierarchy setup then don't use a hierarchical viewer. What it looks like is you want all your level 1 child nodes rendered in one group and all your level 2 sub child nodes rendered in another group. This would be a great time to use a repeater.

Child repeater properties:

• path = /child-nodes/%
• maximum nesting level = 1
• where condition = NodeLevel = 1

Sub child repeater propeties:

• path = /child-nodes/%
• maximum nesting level = -1 // get all levels so the where condition can filter them out
• where condition = NodeLevel = 2

You may want to test this setting for the Hierarchical viewer, change from Inner to Separate.

Hierarchical display mode: Allows the hierarchical display mode to be selected. Inner: generates sub-levels inside the parent item (tree structure). Separate: generates sub-levels outside of the items on parent levels (flat structure)."

Thanks for all the suggestions, I would probably try out the separate display mode as that seems to be doing what I want it to do although little confusing once I start adding more pages I'll have to keep adding levels.

If I were to use to use a hierarchical view and say I want my html layout to be something like this now:

<div class="row">
    <div class="small-12 medium-3 columns">
        CHILD PAGE
        <div class="row">
            <div class="small-12 medium-6 columns">
                SUB CHILD PAGE
            </div>
            <div class="small-12 medium-6 columns">
                SUB CHILD PAGE 2
            </div>
        </div>
    </div>

They display layout on my page would still be the same from my first post. Where I would have the child page columns laid out side by side and then the sub child page columns laid out underneath the child elements side by side.

How would I go about my transformations to get the desired html result? Granted that those pages are custom page types that I've defined and the desired functionality would be to allow users to create their own custom page types whether in a level 1,2, or 3 structure and have it nest properly.

Thanks!

Nevermind, I've figured everything out. Thanks for the suggestions guys really helped me out.

What was your solution? Post it for anyone else who might have the same question/problem.

I'm not sure if this is the proper way of doing it but it works for my scenario so here goes:

I still used a hierarchical viewer/transformations as my html layout changed to something like this:

<div class="row">
<div class="small-12 medium-3 columns">
    parent content
    <div class="row" style="width: 75rem;">
        <div class="small-12 medium-6" style="width: 37.5rem;">
             child content
             <div class="row" style="width: 75rem;">
                 <div class="small-12 medium-3">
                     inner child content
                 </div>
             </div>
        </div>
        <div class="small-12 medium-6" style="width: 37.5rem;">
             child content
        </div>
    </div>
</div>
<div class="small-12 medium-3 columns">
    parent 2 content
    <div class="row" style="width: 75rem;">
        <div class="small-12 medium-6 columns" style="width: 37.5rem;">
             child content
        </div>
        <div class="small-12 medium-6 columns" style="width: 37.5rem;">
             child content
        </div>
    </div>
</div>

As you can see it's basically a menu structure where you'd have a parent page with child pages associated to it and those child pages could also have another child page so a child of the child.

To get my layout working in kentico transformations I did this:

Level 0 Header Transformation: 
<div class="row">

Footer Transformation: 
</div>

Level 0 Item Transformation: 
<div class="small-12 medium-3 columns">
    <h4>{% Page Title %}</h4>
    <p>{% PageContent %}</p>
    <input type="button" value="Select" />  
    {^SubLevelPlaceHolder^}                           
</div>

Level 1 Header Transformation:
<div class="row" style="width: 75rem;">

Footer Transformation: uses the same as the previous one since it's all just a closing </div> tag.

Level 1 Item Transformation:
<div class="small-12 medium-6 columns" style="width: 37.5rem;">
    <h4>{% PageTitle %}</h4>
    <p>{% PageContent %}</p>
    <input type="button" value="Select" />
    {^SubLevelPlaceHolder^}
</div>

The remaining layout would be pretty similar if you have more levels e.g. if you need levels 0, 1, 2, 3,4, etc... you would just keep applying the {^SubLevelPlaceHolder^} where it's appropriate. For those who don't know what the placeholder does according to the kentico documentation "For items that have descendants in the hierarchy, the placeholder is replaced by the child level under the given item (including the header and footer for the new level). If you do not add the sublevel placeholder, the system automatically renders child levels after the code of parent items."

Pretty much those item transformations inside a hierarchical transformation would give you the desired layout I mentioned above.

Now because each child row resides directly in each parent, your rows might not be centred properly as some child rows will be displayed directly underneath it's parent therefore the rows will not be centered properly. I fixed this by using jquery and css to set the problem rows with negative margins. (This might be a little hacky but it's the only way I got it working for now and it works in my situation so I'm sticking with it.)

A sample code pen of what's happening regarding the issue I stated above could be found here: Example Codepen

Hopefully this could be somewhat useful for people looking for a similar answer or at least get you in the right direction of what you're trying to do.