Hi Yadwinder,

Can you post the code you are using to loop through your collection? Also are you using a Razor macro (webforms) or a Mvc View/Partial View?

Thanks,

Jeavon

Hi Jeavon,

Thanks for reply.

I am a beginner.so idon't have much knowledge about razor.

I use the following code using Razor macro.

<div class="row">

@{

if (Model.HasValue("homepagecontentfolder"))

 {

    var content = Library.NodeById(Model.homepagecontentfolder);

  for(var i=0;i>3;i++)

    {

        <div class="row"></div>

    }

 foreach (var items in @content.Children)

  {

<div class="span4 carshow">

   <img src='@items.Media("image", "umbracoFile")'   />

          <h2>@items.heading</h2>

 <h3>@items.date</h3>

          <p>@items.summary</p>

       </div>

  }

You should use the modulo (%) operator and a counter.

 <div class="row">
@for(var i = 0; i<yourList.Count; i++)
{
    <div class="span4 carshow">...</div>
    if (i % 3 == 2) // i / 3 == [product of 3], i % 3 == rest == 2 after each 3 since base is 0
    {
</div>
<div class="row">
    }
}
</div>

I would recommend the use of the InGroupsOf collection method, e.g:

 @{
    if (Model.HasValue("homepagecontentfolder"))
    {
        var content = Library.NodeById(Model.homepagecontentfolder).InGroupsOf(3);
        foreach (var group in content)
        {
            <div class="row">

            @foreach (var items in group)
            {
                <div class="span4 carshow">
                    <img src='@items.Media("image", "umbracoFile")'   />
                    <h2>@items.heading</h2>
                    <h3>@items.date</h3>
                    <p>@items.summary</p>
                </div>
            }
        </div>
        }
    }
}

@Jaevon - nice extension. :) Didn't know about that one.

Another tip to @Yadwinder:

It's generally a better approach to use floating divs and a css "clearfix" rather than nesting divs. (google it)

Like so:
<div class="span4 carshow">...</div> (x 3)
<div class="clearfix"></div>
<div class="span4 carshow">...</div> (x 3)
<div class="clearfix"></div>
...

Here's a nice tutorial:
http://css-tricks.com/all-about-floats/

Hey Jeavon,

Thanks for reply again.

but it's not working for me

Ah, I see I missed the Children collection, try:

var content = Library.NodeById(Model.homepagecontentfolder).Children.InGroupsOf(3);

oh! Thanks a lot.

it works for me.

please give me any web reference from where i learn Razor and Xslt.

Thanks again.

Hi Yadwinder,

I will try to give some web reference where you can learn XSLT and Razor from.

Razor:

http://umbraco.com/help-and-support/video-tutorials/umbraco-fundamentals/razor.aspx ;

http://umbraco.com/help-and-support/video-tutorials/umbraco-fundamentals/razor-recipes.aspx

http://our.umbraco.org/documentation/Cheatsheets/DynamicNodeRazor.pdf

http://our.umbraco.org/documentation/v480/Reference/Templating/Macros/Razor

XSLT:

http://pimpmyxslt.com/articles/

http://pimpmyxslt.com/axesviz.aspx this is a good visual view when you are working with axis in Umbraco

http://our.umbraco.org/wiki/reference/xslt/xpath-axes-and-their-shortcuts

http://umbraco.com/help-and-support/video-tutorials/umbraco-fundamentals/xslt-in-umbraco-45.aspx

http://our.umbraco.org/wiki/reference/xslt/45-xml-schema/xslt-examples-updated-to-new-schema

I know that the team behind Umbraco, working on a new version of Umbraco.tv, where they will focus on Razor. But for now is in beta http://beta.umbraco.tv.

I hope these web references can help you learning XSLT and Razor, but if you got any problems, you just have to ask in this forum, and lots of the forums users will love to help you solve the problem you may have.

/Dennis

Hey jeavon,

Is there any another method to do this without grouping items.

You could use the method posted by Lars-Erik but why would you not want to group?

Thanks a lot again for reply.

I find the solution.

I prefer this one, because i want to sort the items date wise.

and in grouping items are sorted within groups. 

<div class="row">

@{

if (Model.HasValue("homepagecontentfolder"))

 {

    var content = Library.NodeById(Model.homepagecontentfolder);

    var i=0;

 foreach (var items in @content.Children.OrderBy("date desc"))

  {

 if (i % 3 == 0)

            {

               @Html.Raw("</div><div class=\"row\">")

            } 

 <div class="span4 carshow">

   <img src='@items.Media("image", "umbracoFile")'   />

          <h2>@items.heading</h2>

          <h3>@items.date.ToLongDateString()</h3>

          <p>@items.summary</p>

        </div>

  i++;

     }

 }

}

</div>

(Not sure why your reply isn't here yet, but here's an answer to the ordering problem. :) )

You can chain linq extension methods, so you can order, then group. (And order again if you want)

var groups = Library.NodeById(Model.homepagecontentfolder).Children.OrderBy("date desc").InGroupsOf(3)
foreach(var group in groups)
{
 //...
 foreach(var item in group.OrderBy(".. if you want"))
 {
 }
}

is working on a reply...