Hi Graham,

I'm not sure I fully understand what you are attempting if I'm honest.

Could you try and explain it in a bit more detail?

Thanks,

Nik

Hi Graham,

If that's what you are trying to create then you could simply do the following:

var tabs= = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("tabs2017").Where(t=>t.HasValue("title"));

This would get all of the "tabbedContent" then using linq it will filter down the list to only contain the ones where they have the title set.

Then you can iterate around the list twice. Once when you create the tab list, then again when you created the individual tab content.

This is one of the main things I use NestedContent for and you don't need to do anything special with it :-)

Hope that helps.

Nik

Hi Graham,

I thought I would mock up an example for you.

Lets say you have a Document type called "Information Page"

On it, there is a property called "Tabs 2017" (alias tabs2017)

The data type for the property is a nested content data type called Tabs which uses a "Tab Content" document type.

The Tab Content document type has two properties, title and content.

You could do this in your view to render out tabs where they have both content and title:

@{
        var tabs = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("tabs2017").Where(t => t.HasValue("title") && t.HasValue("content"));

        if(tabs.Any())
        {
            //Create tab navigation
           <ul class="nav nav-tabs" role="tablist">
                @foreach(var tab in tabs)
                {
                        <li role="presentation">
                             <a href="#@tab.GetPropertyValue("title")" data-toggle="tab">@tab.GetPropertyValue("title")</a>
                        </li>
                }
           </ul>

            //Create tab Contents
            <div class="tab-content">
                @foreach(var tab in tabs)
                {
                      <div role="tabpanel" class="tab-pane fade" id="@tab.GetPropertyValue("title")">
                              @Html.Raw(tab.GetPropertyValue("content"))
                      </div>
                }
            <div>
        }
}

This is basing the theory that "content" is a Rich Text Editor data type.

Hope that helps.

A few things to note, you need to implement a way to ensure the ID's are unique for the tabs, also you would need to put in some code to identify the first itteration so you can flag the first one in each loop as "active" and not the rest.

I hope that helps :-)

Nik

Oh Nick that's very kind of you!

In my novice state I started to try to write something but this helps clarify.

If I'm honest as I'm so new to this I think I will struggle (though I'll try) with the ID's and setting the first one as active. It's alot harder than the Accordion in that regard :)

That said I will persevere tomorow when my brain is perhaps less fried.

I owe you beers!

Cheers Graham

Hi Graham,

The first one is pretty easy. Something like this will work:

  var isFirst = true; //declare this outside your loop

then in your loop, do something like this:

 @foreach(var tab in tabs)
            {
                    <li role="presentation" class="@(isFirst ? "active" : string.Empty)">
                         <a href="#@tab.GetPropertyValue("title")" data-toggle="tab">@tab.GetPropertyValue("title")</a>
                    </li>

                    isFirst = false;
            }

The Unique ID is a bit harder if I'm honest. There are a few options. This first is something like this:

 var tabs = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("tabs2017").Where(t => t.HasValue("title") && t.HasValue("content"));
var tabsWithIds = tabs.ToDictionary(Guid.NewGuid(), x => x);

tabsWithIds should be a Dictionary that uses Guids for it's keys and then the value is IPublishedContent (i.e. your nested content)

Your foreach loops innards would then change because to get the id you would need to do

  foreach(var tab in tabsWithIds)
  {
     <div>@tab.Key is the ID</div>
     <div>@tab.Value.GetPropertyValue("title") is the title</div>
     <div>@tab.Value.GetPropertyValue("content") is the content</div>
  }

Hope that helps.

That's exactly correct Elitenet - thank you!