How to use the igniteui-angular.GridSummaryCalculationMode.rootAndChildLevels function in igniteui-angular

label: "Root Level Only",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly,
                togglable: true,
                value: GridSummaryCalculationMode.rootLevelOnly
            },
            {
                label: "Child Levels Only",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.childLevelsOnly,
                togglable: true,
                value: GridSummaryCalculationMode.childLevelsOnly
            },
            {
                label: "Root And Child Levels",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootAndChildLevels,
                togglable: true,
                value: GridSummaryCalculationMode.rootAndChildLevels
            }
        ];
    }

label: "Root Level Only",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly,
                togglable: true,
                value: GridSummaryCalculationMode.rootLevelOnly
            },
            {
                label: "Child Levels Only",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.childLevelsOnly,
                togglable: true,
                value: GridSummaryCalculationMode.childLevelsOnly
            },
            {
                label: "Root And Child Levels",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootAndChildLevels,
                togglable: true,
                value: GridSummaryCalculationMode.rootAndChildLevels
            }
        ];
    }

this.summaryCalcModes = [
            {
                label: "Root Level Only",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly,
                togglable: true,
                value: GridSummaryCalculationMode.rootLevelOnly
            },
            {
                label: "Child Levels Only",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.childLevelsOnly,
                togglable: true,
                value: GridSummaryCalculationMode.childLevelsOnly
            },
            {
                label: "Root And Child Levels",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootAndChildLevels,
                togglable: true,
                value: GridSummaryCalculationMode.rootAndChildLevels
            }
        ];
    }

label: "Root Level Only",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly,
                togglable: true,
                value: GridSummaryCalculationMode.rootLevelOnly
            },
            {
                label: "Child Levels Only",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.childLevelsOnly,
                togglable: true,
                value: GridSummaryCalculationMode.childLevelsOnly
            },
            {
                label: "Root And Child Levels",
                selected: this.summaryCalculationMode === GridSummaryCalculationMode.rootAndChildLevels,
                togglable: true,
                value: GridSummaryCalculationMode.rootAndChildLevels
            }
        ];
    }

@Component({
    selector: "app-grid-groupby-summary-sample",
    styleUrls: ["./grid-groupby-summary-sample.component.scss"],
    templateUrl: "./grid-groupby-summary-sample.component.html"
})
export class GridGroupBySummarySampleComponent {
    @ViewChild("grid1", { read: IgxGridComponent })
    public grid1: IgxGridComponent;
    public data;
    public expr: ISortingExpression[];
    public avgSummary = AvgSummary;
    public sumSummary = SumSummary;
    public summaryPositions;
    public summaryPosition = GridSummaryPosition.bottom;
    public summaryCalcModes;
    public summaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;

    constructor() {
        this.data = LOCAL_DATA;
        this.expr = [
            { dir: SortingDirection.Asc, fieldName: "ShipCountry", ignoreCase: false,
              strategy: DefaultSortingStrategy.instance() }
        ];

        this.summaryPositions = [
            {
                label: GridSummaryPosition.top,
                selected: this.summaryPosition === GridSummaryPosition.top,
                togglable: true
            },
            {
                label: GridSummaryPosition.bottom,

selector: "app-tree-grid-summary2-sample",
    styleUrls: ["./tree-grid-summary2-sample.component.scss"],
    templateUrl: "./tree-grid-summary2-sample.component.html"
})
export class TreeGridSummary2SampleComponent implements OnInit {

    @ViewChild("treegrid1", { read: IgxTreeGridComponent, static: true })
    public grid1: IgxTreeGridComponent;
    public data;

    public expr: ISortingExpression[];
    public avgSummary = AvgSummary;
    public summaryPositions;
    public summaryPosition = GridSummaryPosition.bottom;
    public summaryCalcModes;
    public summaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;

    constructor() {
        this.data = FOODS_DATA();
        this.expr = [
            {
                dir: SortingDirection.Asc,
                fieldName: "ShipCountry",
                ignoreCase: false,
                strategy: DefaultSortingStrategy.instance()
            }
        ];

        this.summaryPositions = [
            {
                label: GridSummaryPosition.top,
                selected: this.summaryPosition === GridSummaryPosition.top,