Developer forum

You would typically keep track of a counter that counts each item in the loop. Then based on the counter you can swtich coluns. For example:

int count = 0;
@foreach (var caseItem in GetLoop("ItemPublisher:Items.List"))
{
  count++;
  if (count % 4 == 0) // Dividable by four which means we're in column 4, so switch to new row here
  {
  
  }
}

Instead of checking the remainder of dividing by four you can use the modulo (%) operator to detect other columns as well.

Here's an example that shows the concept with good ol' tables: https://stackoverflow.com/questions/7351466/how-to-display-only-3-table-cells-per-row-when-looping-through-a-collection

Hope this helps,

Imar

Nice Imar.

I now need to loop the items in the row, and i'm getting lost in the jungle of nested loops i think. I got the code like this now:

@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>

@using System.Web;

@using System.Text.RegularExpressions

@using System.Linq;



@{ 

    string selectedSolutionType = !String.IsNullOrEmpty(HttpContext.Current.Request.QueryString.Get("SolutionType")) ? HttpContext.Current.Request.QueryString.Get("SolutionType") : Translate("All");


    var query = HttpUtility.ParseQueryString(HttpContext.Current.Request.QueryString.ToString());

int count = 0;

int rows = 0;


    int caseListPageId = GetPageIdByNavigationTag("CasesListFeed");

    string cardClass = Pageview.Device.ToString() != "Tablet" ? "" : "";

    string cardFooterClass = Pageview.Device.ToString() != "Tablet" ? "" : "";


}


<div class="grid__col-12 cases-carousel">

  <div class="grid">

    @foreach (var caseItem in GetLoop("ItemPublisher:Items.List"))

    {

    string tintedImage = !String.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.CustomerLogo")) ? "layered-image--tinted dw-mod" : "";

    var linkToArticle = caseItem.GetLoop("ItemPublisher:Item.Gallery").Count() > 0 || !string.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.Text")) || !string.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.Challenge")) || !string.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.Solution")) || !string.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.Results")) || !string.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.Challenge"));

    var imageClasses = "";

    imageClasses += " u-padding";

    var columnClasses = "grid__col-3";

    

    count++;

    

if (count % 4 == 0) // Dividable by four which means we're in column 4, so switch to new row here

{

<div class="item-row">

      <div class="@columnClasses case-item">

        <div class="@cardClass">

          <div class="u-margin-bottom">

          <img src="/Admin/Public/GetImage.ashx?width=767&amp;height=567&amp;crop=5&amp;Compression=75&amp;DoNotUpscale=true&amp;FillCanvas=True&amp;image=@caseItem.GetString("ItemPublisher:Item.CustomerLogo")" class="@imageClasses" alt="@caseItem.GetString("ItemPublisher:Item.Title")" />

          </div>

        </div>

      </div>

  </div>


}


}

  </div>

</div>

Wich outputs this html

<div class="grid">

<div class="item-row">

      <div class="grid__col-3 case-item">

        <div class="">

          <div class="u-margin-bottom">

          <img src="/Admin/Public/GetImage.ashx?width=767&amp;height=567&amp;crop=5&amp;Compression=75&amp;DoNotUpscale=true&amp;FillCanvas=True&amp;image=/Files/Images/Cases/Fanø Sparekasse-thumbnail.png" class=" u-padding" alt="Fanø Sparekasse">

          </div>

        </div>

      </div>

  </div>

<div class="item-row">

      <div class="grid__col-3 case-item">

        <div class="">

          <div class="u-margin-bottom">

          <img src="/Admin/Public/GetImage.ashx?width=767&amp;height=567&amp;crop=5&amp;Compression=75&amp;DoNotUpscale=true&amp;FillCanvas=True&amp;image=/Files/Images/Cases/Silken-thumbnail.png" class=" u-padding" alt="Silken">

          </div>

        </div>

      </div>

  </div>

<div class="item-row">

      <div class="grid__col-3 case-item">

        <div class="">

          <div class="u-margin-bottom">

          <img src="/Admin/Public/GetImage.ashx?width=767&amp;height=567&amp;crop=5&amp;Compression=75&amp;DoNotUpscale=true&amp;FillCanvas=True&amp;image=/Files/Images/Cases/Wedding Island-thumbnail.png" class=" u-padding" alt="Wedding Island">

          </div>

        </div>

      </div>

  </div>

  </div>

How can i get 4 items in each row?

You should just output the opening row when the item is the first or every fourth item. i.e.:

if (count % 4 == 0) // Dividable by four which means we're in column 4, so switch to new row here
{
  <div class="item-row">
}
... Other code to output items here
if (count % 4 == 0) // Dividable by four which means we're in column 4, so switch to new row here
{
  </div>
}

This way, you create the start and end of each row when the count is 0, 4, 8 and so on.

At the end, after the loop you'll need an extra check to see if the row hasn't been closed already. That would be the case if the count was not dividable by four so the last if check above didn't add the closing div.

Does this help?

Imar

I ended up doing this:

@{ 

    string selectedSolutionType = !String.IsNullOrEmpty(HttpContext.Current.Request.QueryString.Get("SolutionType")) ? HttpContext.Current.Request.QueryString.Get("SolutionType") : Translate("All");


    var query = HttpUtility.ParseQueryString(HttpContext.Current.Request.QueryString.ToString());


int itemCount = 0;

int rowCount = 0;

int totalItems = GetInteger("ItemPublisher:Items.Count");

int totalSlides = 0;



    int caseListPageId = GetPageIdByNavigationTag("CasesListFeed");

    string cardClass = Pageview.Device.ToString() != "Tablet" ? "" : "";

    string cardFooterClass = Pageview.Device.ToString() != "Tablet" ? "" : "";


}


<div class="grid__col-12 cases-carousel">

  <div class="grid">

    <div class="item-row">

    @foreach (var caseItem in GetLoop("ItemPublisher:Items.List"))

    {    

        string tintedImage = !String.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.CustomerLogo")) ? "layered-image--tinted dw-mod" : "";

        var linkToArticle = caseItem.GetLoop("ItemPublisher:Item.Gallery").Count() > 0 || !string.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.Text")) || !string.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.Challenge")) || !string.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.Solution")) || !string.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.Results")) || !string.IsNullOrEmpty(caseItem.GetString("ItemPublisher:Item.Challenge"));

        var imageClasses = "";

        imageClasses += " u-padding";


        <div class="case-item">

          <div class="@cardClass">

            <div class="u-margin-bottom">

            <img src="/Admin/Public/GetImage.ashx?width=767&amp;height=567&amp;crop=5&amp;Compression=75&amp;DoNotUpscale=true&amp;FillCanvas=True&amp;image=@caseItem.GetString("ItemPublisher:Item.CustomerLogo")" class="@imageClasses" alt="@caseItem.GetString("ItemPublisher:Item.Title")" />

            </div>

          </div>

        </div>


        itemCount++;

        if (itemCount != totalItems)

        {

            string breakMarkup = string.Empty;

            if (itemCount % 4==0)

            {

                breakMarkup = "</div><div class=\"" + "item-row" + "\">";

                totalSlides++;

            }

            @breakMarkup

        }


    }

  </div>

</div>

I suddenly got the idea from the Rapido carousel function, and borrowed that part :) Thanks for the help Imar!