The requested page is not available for the requested platform. You are viewing the content for Default platform.

Create a Hierarchical Report

This tutorial describes how to use the detail band's HierarchyPrintOptions property to create a hierarchical report in Visual Studio at design time. Follow the steps below to create a report based on the Hierarchical Report demo that comes with the DevExpress Demo Center.

HierarchicalReport-Result

Add Demo Data

The Hierarchical Report demo creates and populates its data source in code. The example below demonstrates how you can define the DataSource class that supplies a list of data records to the report. Each record includes a "parent ID" field that defines the parent-child relationship and thus builds the hierarchy.

public class DataSource {
    public static List<SalesData> GetData() {
        List<SalesData> sales = new List<SalesData>();
        sales.Add(new SalesData(0, -1, "Western Europe", 30540, 33000, 32220, 35500, .70));
        sales.Add(new SalesData(1, 0, "Austria", 22000, 28000, 26120, 28500, .92));
        sales.Add(new SalesData(2, 0, "Belgium", 13000, 9640, 14500, 11200, .16));
        //...
        sales.Add(new SalesData(17, -1, "Eastern Europe", 22500, 24580, 21225, 22698, .62));
        sales.Add(new SalesData(18, 17, "Belarus", 7315, 18800, 8240, 17480, .34));
        sales.Add(new SalesData(19, 17, "Bulgaria", 6300, 2821, 5200, 4880, .8));
        //...
        return sales;
    }
}
public class SalesData {
    public SalesData(int id, int regionId, string region, decimal marchSales, decimal septemberSales, decimal marchSalesPrev, decimal septermberSalesPrev, double marketShare) {
        ID = id;
        RegionID = regionId;
        Region = region;
        MarchSales = marchSales;
        SeptemberSales = septemberSales;
        MarchSalesPrev = marchSalesPrev;
        SeptemberSalesPrev = septermberSalesPrev;
        MarketShare = marketShare;
    }
    // A node's ID in the hierarchical structure
    public int ID { get; set; }
    // A node's ParentID in the hierarchical structure
    public int RegionID { get; set; }
    public string Region { get; set; }
    public decimal MarchSales { get; set; }
    public decimal SeptemberSales { get; set; }
    public decimal MarchSalesPrev { get; set; }
    public decimal SeptemberSalesPrev { get; set; }
    public double MarketShare { get; set; }
}

Copy the DataSource.cs/DataSource.vb file with this class from the C:\Users\Public\Documents\DevExpress Demos 19.1\Components\Reporting\CS\DevExpress.DemoReports\HierarchicalReport folder to your project to reproduce this tutorial.

HierarchicalReport-Project-Structure

Build your solution.

Add a Data-Bound Report

Invoke the Report Wizard.

  1. Select Table Report and click Next.

    HierarchicalReport-Project-Structure

  2. (2.1-2.6) Create an ObjectDataSource based on the DataSource class that you added above.

  3. Leave data fields unselected to create an empty report bound to the created data source.

    HierarchicalReport-SelectFields

Click Finish and the Report Designer opens the generated report.

HierarchicalReport-SelectFields

Arrange Controls on the Report

  1. Add the Report Header band.
  2. Add the Page Header band.
  3. Add data-bound labels to the Detail band.

HierarchicalReport-ArrangeControls

Switch to the Preview tab to see an intermediate result.

HierarchicalReport-ArrangeControls-Result

Specify Hierarchy Print Options

Do the following to print the report's hierarchical data in tree mode:

  1. Specify the Detail band's HierarchyPrintOptions property.

    HierarchicalReport-Set-HierarchyPrintOptions

    HierarchicalReport-HierarchyPrintOptions-Result

    As you can see in the image above, the Detail band that contains child rows is printed with the specified indent. However, the row (the sum of the label widths) does not fit the page now.

  2. Anchor the data-bound labels to the right edge of the Detail band (their container).

    Set the label's AnchorHorizontal property to Right.

  3. Anchor the first data-bound label to the Detail band's left and right edges.

    Set the Region label's AnchorHorizontal property to Both.

    HierarchicalReport-HierarchyPrintOptions-Result

Add a Drill-Down Control

  1. Add the XRCheckBox control to the Detail band at the left-most position.

    HiearachicalReport-AddCheckBox

  2. Set the XRCheckBox control's glyph options.

    HierarchicalReport-CheckBoxProperties

    You can use your glyphs for the checked and unchecked checkbox states. In this tutorial, images from the DX Vector Images collection are used. This collection is available in the Image Picker that is invoked if you click the CustomGlyphs.Checked/CustomGlyphs.Unchecked property's ellipsis button in the Properties window.

  3. Set the Detail band's DrillDownControl property to the added XRCheckBox control.

    HierarchicalReport-SetDrillDownControl

    When a report is printed in tree mode, the Drill-Down control expands/collapses child rows.

  4. Set the XRCheckBox's CheckState property to the following expression: [ReportItems].[Detail].[DrillDownExpanded] (in the control's Smart Tag or the Property window's Expressions tab).

    HierarchicalReport-CheckStateExpression

    HierarchicalReport-DrillDownControl

Sort Report Data

You can use the Detail band's SortFields property to sort data on each hierarchy level.

HierarchicalReport-SortFieldsProperty

HierarchicalReport-SortedData

Highlight Root Nodes

To format rows based on their nesting level, use the CurrentRowHierarchyLevel variable in expressions. For example, specify the Detail band's appearance properties as listed below:

  • Set the BackColor property to iif([DataSource.CurrentRowHierarchyLevel] == 0, Rgb(231,235,244), ?)
  • Set the Font.Bold property to [DataSource.CurrentRowHierarchyLevel] == 0

HierarchicalReport-ExpressionVariable

HierarchicalReport-HighlightedRootNodes