multinode treepicker show data in groups

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

René Andersen 238 posts 684 karma points

Dec 07, 2015 @ 11:18

Hi everybody,

I have picked 4 items with the Multinode Treepicker and I need the output to be 2 and 2 like the code below:

<div class="one-half">
    <div class="info">
        <h3>Headline 1</h3>
        <p>Some text 1</p>
    </div>
</div>
<div class="one-half last">
    <div class="info">
        <h3>Headline 2</h3>
        <p>Some text 2</p>
    </div>
</div>

My problem is that the first item should be class "one-half" and the second should be "one-half last".

Between item 1+2 and 3+4 I need the div class="clear"

The third and fourth item should be exactly as item 1 and 2. Below you can see the code I need it to output:

<div class="one-half">
    <div class="info">
        <h3>Headline 1</h3>
        <p>Some text 1</p>
    </div>
</div>
<div class="one-half last">
    <div class="info">
        <h3>Headline 2</h3>
        <p>Some text 2</p>
    </div>
</div>

<div class="clear"></div>

<div class="one-half">
    <div class="info">
        <h3>Headline 3</h3>
        <p>Some text 3</p>
    </div>
</div>
<div class="one-half last">
    <div class="info">
        <h3>Headline 4</h3>
        <p>Some text 4</p>
    </div>
</div>

My Razor code looks like this:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var infoList = CurrentPage.services.ToString().Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
    var infoCollection = Umbraco.Content(infoList);
    foreach (var item in infoCollection)
    {
        <div class="one-half">
            <div class="info">
                <h3>@item.heading</h3>
                <p>@item.introText</p>
            </div>
        </div>
    }
}

Thanks in advance!

// René

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Dec 07, 2015 @ 12:21

Hi René

You can use the method InGroupsOf. So what if you do something like this would this work as you like it to.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var infoList = CurrentPage.services.ToString().Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
    var infoCollection = Umbraco.Content(infoList);
    foreach (var group in infoCollection.InGroupsOf(2))
    {
        <div class="one-half">
            <div class="info">
                @foreach(var item in group){
                    <h3>@item.heading</h3>
                    <p>@item.introText</p>
                }
            </div>
        </div>
    }
}

Hope this helps,

/Dennis

Copy Link

René Andersen 238 posts 684 karma points

Dec 07, 2015 @ 13:30

Hi Dennis,

Your method worked almost as it should but the output was 4 groups instead of 2. However I found a solution and used IsHelpers like "IsFirst and IsLast" see code below.

foreach (var item in group)
{
    if (item.IsFirst())
    {
        <div class="one-half">
            <i class="@item.icon special"></i>
            <div class="info">
                <h3>@item.heading</h3>
                <p>@item.introText</p>
            </div>
        </div>
    }
    if (item.IsLast())
    {
        <div class="one-half-last">
            <i class="@item.icon special"></i>
            <div class="info">
                <h3>@item.heading</h3>
                <p>@item.introText</p>
            </div>
        </div>
    }
}
<div class="clear"></div>

Is this the way to do it or is there a more clean method?

// René

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Dec 07, 2015 @ 13:57
100
Hi René

Great that I could help you in the right direction and that you have something that works for you now.

Yes there is a more clean method, and it´s less code :-)

You can do it like this code below.
```
foreach (var item in group)
{

        <div class="one-half@(item.IsLast() ? "-last" : null)">
            <i class="@item.icon special"></i>
            <div class="info">
                <h3>@item.heading</h3>
                <p>@item.introText</p>
            </div>
        </div>
}
<div class="clear"></div>
```
/Dennis
Copy Link
René Andersen 238 posts 684 karma points

Dec 07, 2015 @ 14:01

0

Hi Dennis

Your last method works great. Very nice and clean code.

Thank you!

// René

Copy Link
is working on a reply...

Please Sign in or register to post replies