looping over nodes in groups in razor

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

ivansager 15 posts 38 karma points

Feb 13, 2015 @ 06:55
0

Looping over nodes in Groups in Razor

Razor
I'm trying to a create Nav tree in Umbraco with Razor and struggling to figure this out. Any help would be appreciated

The content model will contain about 10 nodes in a 'for each loop' and for the first 3 nodes ONLY the first div class should be "item active" but after 3 nodes the div class should be "item"
```
<div class="**item active**">
 <div class="row">
  <div>value1</div>
  <div>value2</div>
  <div>value3</div>
 </div> 
</div>

<div class="**item**">
 <div class="row">
  <div>value4</div>
  <div>value5</div>
  <div>value6</div>
 </div> 
</div>

<div class="**item**">
 <div class="row">
  <div>value7</div>
  <div>value8</div>
  <div>value9</div>
 </div> 
</div>
```
Copy Link
Fuji Kusaka 2203 posts 4220 karma points

Feb 13, 2015 @ 07:13
0
Hi ivansager,

Try somthing like this in your loop, ,first you need to tell your loop to take 10 nodes in a group of 3
```
@foreach(var x in nodes.Take(12).InGroupsOf(3)){
foreach(var y in x){
if(y.Position()%3==0){
<div class="**item**">
</div>
}
else{
<div class="**item active**">
</div>
} 
} 
}
```
hope this helps
Copy Link

ivansager 15 posts 38 karma points

Feb 13, 2015 @ 08:05

I tried that but it does not work because it outputs the repearted Div row

var leaderModels = Model.Content.AncestorOrSelf(1).DescendantsOrSelf("LeadershipLandingPage").OrderBy("leadershipSortorder");
foreach (var x in leaderModels.Take(12).InGroupsOf(3))
{
   foreach (var y in x)
    {
        if (y.Position() % 3 == 0)
        {
            <div class="**item**">
            </div>
        }
        else
        {
            <div class="**item active**">
            </div>
        }
    }
}

I need:
<divclass="**item**">
 <divclass="row">
  <div>value4</div>
  <div>value5</div>
  <div>value6</div>
 </div> 
</div>


<divclass="**item Active**">
 <divclass="row">
  <div>value7</div>
  <div>value8</div>
  <div>value9</div>
 </div> 
</div>

NOT
<div class="**item**">value1 </div>
<div class="**item**">value2 </div>
<div class="**item active**">value3 </div>
<div class="**item active**">value4 </div>
<div class="**item active**">value5 </div>

Copy Link

ivansager 15 posts 38 karma points

Feb 13, 2015 @ 08:06

I tried that but it does not work because it outputs the repearted Div row

var leaderModels = Model.Content.AncestorOrSelf(1).DescendantsOrSelf("LeadershipLandingPage").OrderBy("leadershipSortorder");
foreach (var x in leaderModels.Take(12).InGroupsOf(3))
{
   foreach (var y in x)
    {
        if (y.Position() % 3 == 0)
        {
            <div class="**item**">
            </div>
        }
        else
        {
            <div class="**item active**">
            </div>
        }
    }
}

I need:
<divclass="**item**">
 <divclass="row">
  <div>value4</div>
  <div>value5</div>
  <div>value6</div>
 </div> 
</div>


<divclass="**item Active**">
 <divclass="row">
  <div>value7</div>
  <div>value8</div>
  <div>value9</div>
 </div> 
</div>

NOT
<div class="**item**">value1 </div>
<div class="**item**">value2 </div>
<div class="**item active**">value3 </div>
<div class="**item active**">value4 </div>
<div class="**item active**">value5 </div>

Copy Link

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

Feb 13, 2015 @ 08:15

Hi ivansager,

What if you do something like this, did you get the output you want.

var leaderModels = Model.Content.AncestorOrSelf(1).DescendantsOrSelf("LeadershipLandingPage").OrderBy("leadershipSortorder");
foreach (var x in leaderModels.Take(12).InGroupsOf(3)){
   if (x.IsFirst()){
            <div class="**item active**">
                <div class="row">
                    @foreach (var y in x){
                        <div></div>
                    }
                    
                </div>
            </div>
        }
        else
        {
            <div class="**item**">
                <div class="row">
                    @foreach (var y in x){
                        <div></div>
                    }
            </div>
        }
}

Hope this helps,

/Dennis

Copy Link

ivansager 15 posts 38 karma points

Feb 13, 2015 @ 09:51

0

Finally....Yes that worked my friend! Thank you. While I am sure there is a more elegant way of doing this by not repeating the div in each loop this works perfect.

Cheers
Ivan

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

Feb 13, 2015 @ 10:13

0

Hi ivansager,

That is great that is works for you. Happy that I could help you to find a solution. Please remember to mark the topic as solved so others can go straight to the solution if they come across the same issue. You do this by clicking the little green tick on the post that give you the solution to your question / problem.

/Dennis

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?