ingroupsof - Razor - our.umbraco.com

Fuji Kusaka 2203 posts 4220 karma points

Feb 12, 2014 @ 12:03

InGroupsOf()

Hi guys,

Am trying to achieve something like this when accessing a Media Folder.

<ul id="p">
    <li>
        <ul>
            <li class="m">
                <a href="#">
                    <div class="Img">
                        <img src="#" width="225" height="225" alt="image1" />
                    </div>
                </a>
                <div class="pre-cn">
                    <a href="#" >Some Text</a>
                    <a href="#" >Some Text</a>
                    <a href="#">
                        Some Text
                    </a>
                    <a href="#">Read articles</a>
                </div>
            </li>
            <li class="l">
                <ul>
                    <li>
                        <a href="#"><img src="#" width="80" height="80" alt="image1" /></a>
                        <a href="#" class="pre">Some Text</a>
                        <a href="#" class="pre">Some Text</a>
                    </li>
                    <li>
                        <a href="#"><img src="#" width="80" height="80" alt="image1" /></a>
                        <a href="#" class="pre">Some Text</a>
                        <a href="#" class="pre">Some Text</a>
                    </li>
                    <li>
                        <a href="#"><img src="#" width="80" height="80" alt="image1" /></a>
                        <a href="#" class="#">Some Text</a>
                        <a href="#" class="#">Some Text</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    
</ul>

I was thinking of using InGroupsOf(3).Take(12) since i only need maximum of 12 items.

var c = @Model;
      if(!String.IsNullOrEmpty(c.mediaPickerTool)){
          int Id = Convert.ToInt32(c.mediaPickerTool);
                    
           var startMedia = new Media(Id);
                
                IEnumerable<Media> nodes = startMedia.GetChildMedia().ToList();
                 <div style="visibility:hidden;">
                     <ul id="p">
                      @foreach(var item in nodes.Take(12)){
                          <li>
                             <ul>
                                  <li class="m">
                                       @item.Text
                                        </li>
                                        
                               </ul>                              
                           </li>
                             
                     }
                      </ul>
            </div>

When i used nodes.InGroupsOf(3), i get an error

error CS1061: 'System.Collections.Generic.IEnumerable' does not contain a definition for 'InGroupsOf'

Any suggestion how i can get this working ?

//Fuji

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Feb 12, 2014 @ 13:21

Finally got it working.

var c = @Model;
if (!String.IsNullOrEmpty(c.mediaPickerTool))
    {

var folderId = c.mediaPickerTool;
    var media = Model.MediaById(folderId);
    var items = media.Children;
        <ul id="press-">
@foreach (var group in items.Take(12).InGroupsOf(3)){
<li>
 <ul>
@foreach(var item in group){
if(item.Position() % 3 == 0){
@item.Name <br/>
}
else{
<td align="center">@item.Name</td>
}
}
</ul>
</li>
}
</ul>
 }

//Fuji

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Feb 12, 2014 @ 14:18

Looks like i was wrong i miss something here. I somehow need another grouping.

var c = @Model;
    if (!String.IsNullOrEmpty(c.mediaPickerTool))
    {
        var folderId = c.mediaPickerTool;
         var media = Model.MediaById(folderId);
         var items = media.Children;

        <ul id="press-">
            @foreach (var group in items.Take(12).InGroupsOf(3)){
                 <li>
                        <ul>
                            @foreach(var item in group)
                            {
                                if(item.Position() % 3 == 0){
                                     <li class="main-press-panel">
                                        <a href="@item.GetPropertyValue("newsUpload")" target="_blank">
                                            <div class="reasonCnImg">                                             
                                            </div>
                                        </a>
                                        <div class="press-content">
                                              <a href="#" class="press-release-date">@item.CreateDate.ToString("dd MMMM, yyyy")</a>
                                            <a href="#">Read article</a>
                                        </div>
                                    </li>                                 
                                }
                                else{
                                     <li class="listings-press-panel">
                                         @item.Name
                                    </li>

                                }
                            }
                        </ul>
                    </li>
            }
        </ul>
    }

Here in the else i need to get the html to output this for the other 2 remaining items

<li class="listings-press-panel">
                        <ul>
            <li>
    <a href="#" class="press-release-date">22 January, 2014</a>
                    <a href="#" class="press-release-title">Let there be light</a>
                </li>
                <li>
                 <a href="#" class="press-release-date">22 January, 2014</a>
                     <a href="#" class="press-release-title">Let there be light</a>
                </li>                             
                           </ul>
    </li>

Any help on this part please

//fuji

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Feb 12, 2014 @ 17:05

Any suggestionns on this please ?

/Fuji

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Feb 12, 2014 @ 19:01

Almost there now i just have to skip the first item in the loop

else if(item.Position() % 3 == 1){
<li class="listings-press-panel">
        <ul>
        @foreach(dynamic sub in group){
                <li>
                @sub.Name 
                </li>
            }                                           
     </ul>
    </li>
}

Here i can possibly skip a group of item right but is there a way out ?

May be IEnumerable<grouping<object, Media >> ??

Copy Link

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

Feb 12, 2014 @ 19:13

Hi Fuji,

Maybe this is a long shot but have you tried to use the Skip() http://umbraco.com/follow-us/blog-archive/2011/2/23/umbraco-47-razor-feature-walkthrough-%E2%80%93-part-1.aspx

else if(item.Position() % 3 == 1){
<li class="listings-press-panel">
        <ul>
        @foreach(dynamic sub in group.Skip(1)){
                <li>
                @sub.Name 
                </li>
            }                                           
     </ul>
    </li>
}

Hope this helps,

/Dennis

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Feb 12, 2014 @ 19:34

Hi Dennis,

Yes i did, that was the first thing i did but no success.

I ended up doing something like, making use of Position instead.

@foreach(dynamic sub in group){
        if(sub.Position() != 0){
            <li > @sub.Name @count</li>
         }                                  
 }

Copy Link

Ravi Motha 290 posts 500 karma points MVP 8x c-trib

Feb 13, 2014 @ 17:38

if you need to miss the first one, have you tried removing the first record , so you can then just run through and the display the records you have left?

Copy Link

Charles Afford 1163 posts 1709 karma points

Feb 15, 2014 @ 22:03

is this a partial view or view? It feels like you are building complexity here.

i copied and pasted from above.

If you have a collection of media objects

In a nut shell what are you trying to acheive :). charlie

Copy Link

is working on a reply...

Flag this post as spam?

InGroupsOf()