displaying nested items

What does you result look like? Should there be a level above all the YearlyContainers? The hierarchical viewer should be point to that as the path. Then your level may need to shift down one level each.

Current Output is as

-YearlyContainer 
 - YearDetailContent
  --files to download
  --files to download (from 2nd yearDetailContent)
 -yearDetailContent
  -- all files to download from all yearDetailContent within another yearly content.

Basically, yearlyContainer is not separting in two row for different yearlyContainer. and yearDetailContent from another yearlyContainer is also comming in first yearlyContainer. and files from all yearDetailContent are comming under first yearDetailContent section.

Can you paste your transformation for the YearlyContainer and YearDetailContent here?

This is the list of transformations

custom.FinancialResultYearlyContainer.Trans_FinanacialHirerachicalResultHeader

<section class="row expanded first-download" style="background-color:'<%# Eval("BackgroundColor") %>'">
<div class="first-download-block result-block-report">  
<h2 class="secondary-title-text"><%# Eval("Year") %> Results <span class="according_arrow"></span></h2>
<div class="wf-pNewsTwoCol">

custom.FinancialResultYearlyContainer.Trans_FinancialYearlyContainer_footer

</div>
</div>
</section>

custom.FinancialResults.Trans_financialResult_header

 <div class="wf-pNewsTwoCol__col">
  <div class="wf-card-block red-block-report">
    <div class="red-block-report__date"><%# Eval("Date", "{0:dd MMM yyyy}") %></div>
    <p><%# Eval("Title") %></p>
    <div class="report_btn_wrapper">

custom.FinancialResults.Trans_FinancialResult_footer

</div>
</div>
</div>

custom.FinancialResultAttachment.Trans_financialResultAttachement_Item

 <script runat="server" >
  protected string GetTarget(object isExternalLink){
    if(!(isExternalLink is DBNull) && Convert.ToBoolean(isExternalLink)){
      return "_blank";
    }
    return "";
  }
</script>
<%# IfEmpty(Eval("Link"), "<a href='"+GetFileUrl("File")+"' target = '_blank'  class='Button'>"+Eval("Title")+"</a>",  "<a href='"+Eval("Link")+"' target ='"+GetTarget(Eval("IsExternalLink"))+"' class='Button'>"+Eval("Title")+"</a>") %>

The final html expected is as

The prototype html is as for one yearly container. such section should be repeated.

<section class="row expanded third-download">
 <div class="first-download-block result-block-report">  
    <h2 class="secondary-title-text">2016 Results <span class="according_arrow"></span></h2>
    <div class="wf-pNewsTwoCol">
        <div class="wf-pNewsTwoCol__col">
            <div class="wf-card-block red-block-report">
                <div class="red-block-report__date">21 FEB 2017</div>
                <p>2016 Annual Financial Report</p>
                <div class="report_btn_wrapper">
                    <a href="#" class="Button">Pdf </a>
                    <a href="#" class="Button">Pdf </a>
                    <a href="#" class="Button">Pdf </a>
                    <a href="#" class="Button">Pdf </a>
                </div>
            </div>
        </div>
        <div class="wf-pNewsTwoCol__col">
            <div class="wf-card-block red-block-report">
                <div class="red-block-report__date">21 FEB 2017</div>
                <p>2016 Annual Financial Report</p>
                   <div class="report_btn_wrapper">
                    <a href="#" class="Button">Pdf </a>
                    <a href="#" class="Button">Pdf </a>
                    <a href="#" class="Button">Pdf </a>
                    <a href="#" class="Button">Pdf </a>
                </div>
            </div>
        </div>
    </div>
  </div>
</section>

The content structure on admin is as

Rui, also I need to built this sections based on search result by keyword and year value, so if this can be handled in different way then please consider that point too. Thanks

Dilip, first thing I notice missing from your transformation is the placeholder for the child level.

<cms:SubLevelPlaceHolder runat="server" ID="plcSub" />

You need to place that in the parent level so the child level know that's the place to go. So you top two level transformation should look like these

<section class="row expanded first-download" style="background-color:'<%# Eval("BackgroundColor") %>'">
<div class="first-download-block result-block-report">  
<h2 class="secondary-title-text"><%# Eval("Year") %> Results <span class="according_arrow"></span></h2>
<div class="wf-pNewsTwoCol">
<cms:SubLevelPlaceHolder runat="server" ID="plcSub" />

and

 <div class="wf-pNewsTwoCol__col">
  <div class="wf-card-block red-block-report">
    <div class="red-block-report__date"><%# Eval("Date", "{0:dd MMM yyyy}") %></div>
    <p><%# Eval("Title") %></p>
    <div class="report_btn_wrapper">
    <cms:SubLevelPlaceHolder runat="server" ID="plcSub" />

As for the search part, are you talking about use the smart search to find the result? That's very different from what the hierarchical viewer and transformation can do. Search results are flat, so there won't be the hierarchical structure that you can utilize.

Placing the placeholder also produce the same output as below:

Based on content structure as below

The output should be different for 2016 results and 2014 year results also each year has two financial result.

Regarding search I want to implement the smart search on this yearly container, financial result and attachement titles. How should I do if it has to be done differently(I have no experience on smart search) Also, I have asked the question related to search at here!

Thanks!

Here are the screen shots

Thanks Rui that is really helpful!

One more request. I have to implement search on such documents as well. also filter by year from year value in yearlyContainer. How could I achieve searching on this kind of structure and show the result. I have asked the question here, since you know the expected output and content structure, can you please guide over this.