Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@ The main benefits of this approach are:
* Works naturally with hierarchical object models or JSON data.
* Cleaner and more maintainable for multi-level hierarchies.

The example in this tutorial shows how to present and organize a report when the used data has a nested (hierarchical) structure. To illustrate the hierarchical structure of the data used in the tutorial, see the JSON data below. It represents a collection of Categories, where each category contains a **nested** list of its Products.

Let's have the sample [JSON data](https://github.com/telerik/reporting-samples/blob/master/Sample%20Reports/Data%20Files/Categories-Products-Nested-Data.json) representing a collection of Categories. Each category contains a nested list of its Products. This is a piece of the JSON content to better understand the Categories-Products hierarchical structure.
The example in this tutorial shows how to present and organize a report when the used data has a nested (hierarchical) structure. Let's have the sample [JSON data](https://github.com/telerik/reporting-samples/blob/master/Sample%20Reports/Data%20Files/Categories-Products-Nested-Data.json) representing a collection of Categories. Each category contains a **nested** list of its Products.

A complete step-by-step video is available here:

Expand All @@ -47,7 +45,9 @@ To design a report that represents a hierarchy:

1. Navigate to the **INNER REPORT** section and select the **UriReportSource** Type. Now, you need to create a separate report that will be used as a container for the products for each category.

1. Create another report (`ProductsReport.trdp`) and add two TextBox items.
1. Create another report (`ProductsReport.trdp`).

1. Remove the default header/footer and add two TextBox items (or other Report items according to the data you need to display).

1. Using the search box, navigate to the **Value** field and bind to `=Fields.ProductName` and `=Fields.Price` respectively. Save the child report.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@ CEO
│ │ ├── Accountants
</pre>

The approach demonstrated here uses a recursive SubReport to construct an hierarchy from flat data. The main report references itself in a SubReport item, and each SubReport filters its data using a report parameter passed from its parent. This process continues recursively, building the hierarchy until no more child items remain:

The approach demonstrated here uses a recursive [SubReport]({%slug web-report-designer-user-guide-components-subreport%}) to construct an hierarchy from flat data. The main report references itself in a SubReport item, and each SubReport filters its data using a report parameter passed from its parent. This process continues recursively, building the hierarchy until no more child items remain:

<iframe width="560" height="315" src="https://www.youtube.com/embed/pzGIhgwfwZk?si=Cl3zj-v9Cuy4DJDb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
---
title: Creating Reusable Headers and Footers
page_title: Creating Reusable Headers and Footers
description: Learn how to use SubReports in the Web Report Designer to create reusable header and footers.
slug: creating-reusable-headers-and-footers
tags: web, report, design, components, subreport, header, footer, reuse
published: True
reportingArea: WRDHTML5, WRDBlazorWrapper
position: 4
---

# Creating Reusable Headers and Footers with SubReport

The SubReport item is a perfect fit if you need to build reusable parts of a Report that can be integrated into other bigger reports later.

Here's a step-by-step tutorial for creating a reusable part of a report (for example, header and footer) using a SubReport:

<iframe width="560" height="315" src="https://www.youtube.com/embed/sMgP2iNkvvM?si=A7g7W7pBGyzlEt9y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## Creating the Header Report

1. Create a new report (for example, HeaderReport.trdp).

1. Remove the default header and footer.

1. Add elements like company logo, report title, etc. in the Page Header section:

1. Preview and save this report as a standalone file. This will serve as your reusable header part of a bigger report.

## Creating the Footer Report

1. Create a new report (for example, FooterReport.trdp).

1. Remove the default header and footer.

1. Add elements like information text or any other meaningful content to the footer part of a report.

1. Preview and save this report as a standalone file. This will serve as your reusable footer part of a bigger report.

## Adding SubReports to Your Main Report

1. Create a new report that will be the main report.

1. Select the Details section and add a SubReport item.

1. Navigate to the `INNER REPORT` section and select the **UriReportSource** option.

1. For the **Uri** field select the HeaderReport.trdp.

1. Preview the report to see that the header content is successfully included.

1. Select the Details section again and add another SubReport item.

1. Navigate to the `INNER REPORT` section and select the **UriReportSource** option.

1. For the **Uri** field select the FooterReport.trdp.



## See Also

* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%})
* [Data Sources]({%slug web-report-designer-user-guide-components-data-sources%})
2 changes: 1 addition & 1 deletion user-guide/components/subreport/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ A SubReport is a report component that allows you to embed one report inside ano
SubReports act as containers that automatically adjust their size based on the content of the embedded report. You can use SubReports to create:

* [Master-detail relationships]({%slug web-report-designer-user-guide-creating-master-detail-report%})&mdash;Display related data in a parent-child format (for example, categories and their products). The master report with categories passes a report parameter (CategoryID) to the child report with products to filter the relevant hierarchical data.
* Reusable components&mdash;Create shared headers, footers, or report sections that can be used across multiple reports.
* [Reusable components]({%slug creating-reusable-headers-and-footers%})&mdash;Create shared headers, footers, or report sections that can be used across multiple reports.
* Complex layouts&mdash;Combine different data sources and report structures within a single report.
* [Hierarchical data]({%slug wrd-user-guide-create-nested-hierarchy-with-subreport%})&mdash;Show nested data relationships with proper grouping and organization. The Web Report Designer provides an alternative approach to parameter binding for hierarchical data using the **DataSource** property of the **SubReport** item. This method is cleaner when your detail report is fully data-bound (not just a table inside it) and works well for hierarchical nested data scenarios.
* [Organization Structure]({%slug wrd-user-guide-create-org-hierarchy-with-subreport%})&mdash;Use recursive SubReports and a self-referencing flat data source. The hierarchy is achieved by having the main report reference itself as a SubReport, passing a parameter that filters child records based on the parent’s ID.
Expand Down