igniteui-angular-sovn/src/lib/grids/tree-grid/tree-grid.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<ng-content select="igx-grid-toolbar"></ng-content>
<ng-content select="igx-tree-grid-group-by-area"></ng-content>
<igx-grid-header-row class="igx-grid-thead" tabindex="0"
    [grid]="this"
    [hasMRL]="hasColumnLayouts"
    [activeDescendant]="activeDescendant"
    [width]="calcWidth"
    [pinnedColumnCollection]="pinnedColumns"
    [unpinnedColumnCollection]="unpinnedColumns"
    (keydown.meta.c)="copyHandler($event)"
    (keydown.control.c)="copyHandler($event)"
    (copy)="copyHandler($event)"
    (keydown)="navigation.headerNavigation($event)"
    (focus)="navigation.focusFirstCell()"
>
</igx-grid-header-row>

<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
    <div class="igx-grid__tbody-content"  tabindex="0" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)"
    (dragStop)="selectionService.dragMode = $event" [attr.aria-activedescendant]="activeDescendant" [attr.role]="dataView.length ? null : 'row'"
        (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>
        <span *ngIf="moving && columnInDrag && pinnedColumns.length <= 0"
            [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
            class="igx-grid__scroll-on-drag-left"></span>
        <span *ngIf="moving && columnInDrag && pinnedColumns.length > 0"
            [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
            class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
        <ng-template #pinnedRecordsTemplate>
            <ng-container *ngIf="data
            | treeGridTransaction:pipeTrigger
            | visibleColumns:hasVisibleColumns
            | treeGridNormalizeRecord:pipeTrigger
            | treeGridAddRow:true:pipeTrigger
            | gridRowPinning:id:true:pipeTrigger
            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true
            | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true as pinnedData">
                <div #pinContainer *ngIf="pinnedData.length > 0"
                    [ngClass]="{
                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,
                        'igx-grid__tr--pinned-top': isRowPinningToTop
                    }"
                    class="igx-grid__tr--pinned" [style.width.px]="calcWidth">
                    <ng-container *ngFor="let rowData of pinnedData;let rowIndex = index;">
                        <ng-container *ngTemplateOutlet="pinned_record_template; context: getContext(rowData, rowIndex, true)">
                        </ng-container>
                    </ng-container>
                </div>
            </ng-container>
        </ng-template>
        <ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null"></ng-container>
        <ng-template igxGridFor let-rowData [igxGridForOf]="data
        | treeGridTransaction:pipeTrigger
        | visibleColumns:hasVisibleColumns
        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger
        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger
        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger
        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger
        | treeGridPaging:!!paginator:page:perPage:pipeTrigger
        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
        | treeGridAddRow:false:pipeTrigger
        | gridRowPinning:id:false:pipeTrigger"
            let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
            [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer
            (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'
                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'
                (cachedViewLoaded)='cachedViewLoaded($event)'>
            </ng-template>
        </ng-template>
        <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null"></ng-container>
        <ng-template #record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData>
            <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [disabled]="disabledRow"
                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
                [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
            </igx-tree-grid-row>
        </ng-template>
        <ng-template #pinned_record_template let-rowIndex="index" let-rowData>
            <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData"
                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
                [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger"#row #pinnedRow>
            </igx-tree-grid-row>
        </ng-template>
        <ng-template #summary_template let-rowIndex="index" let-rowData>
            <igx-grid-summary-row [gridID]="id" [summaries]="rowData.summaries"
                [firstCellIndentation]="rowData.cellIndentation" [index]="rowIndex"
                class="igx-grid__summaries--body" role="row" #summaryRow>
            </igx-grid-summary-row>
        </ng-template>
        <ng-container *ngTemplateOutlet="template"></ng-container>
        <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
        <igc-trial-watermark></igc-trial-watermark>
    </div>
    <div igxToggle #loadingOverlay>
        <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
        </igx-circular-bar>
    </div>
    <span *ngIf="moving && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
        id="right" class="igx-grid__scroll-on-drag-right"></span>
        <div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize"  (pointerdown)="$event.preventDefault()"
            [style.height.px]='calcHeight'>
        <div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
        <div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
        </div>
        <div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
    </div>
    <div class="igx-grid__addrow-snackbar">
        <igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="resourceStrings.igx_grid_snackbar_addrow_actiontext" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>
    </div>

    <div igxOverlayOutlet #igxBodyOverlayOutlet="overlay-outlet"></div>
</div>

<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summaryRowHeight' #tfoot>
    <div tabindex="0" (focus)="navigation.focusFirstCell(false)"
    (keydown)="navigation.summaryNav($event)" [attr.aria-activedescendant]="activeDescendant">
        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'
            *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
            [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
            class="igx-grid__summaries" #summaryRow>
        </igx-grid-summary-row>
        <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'
            [style.width.px]="scrollSize"></div>
    </div>
</div>

<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
    <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
    <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>
        </ng-template>
    </div>
    <div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
</div>

<div class="igx-grid__footer" #footer>
    <ng-content select="igx-grid-footer"></ng-content>
    <ng-content select="igx-paginator"></ng-content>
</div>

<ng-template #emptyFilteredGrid>
    <span class="igx-grid__tbody-message" role="cell">
        <span>{{emptyFilteredGridMessage}}</span>
        <span *ngIf='showAddButton'>
            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
        </span>
    </span>
</ng-template>

<ng-template #defaultEmptyGrid>
    <span class="igx-grid__tbody-message" role="cell">
        <span>{{emptyGridMessage}}</span>
        <span *ngIf='showAddButton'>
            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>
        </span>
    </span>
</ng-template>

<ng-template #defaultAddRowEmptyTemplate>
    <button igxButton="raised" igxRipple (click)="this.crudService.enterAddRowMode(null, false, $event)">
        {{resourceStrings.igx_grid_add_row_label}}
    </button>
</ng-template>

<ng-template #defaultLoadingGrid>
    <div class="igx-grid__loading">
        <igx-circular-bar [indeterminate]="true">
        </igx-circular-bar>
    </div>
</ng-template>

<div *ngIf="rowEditable" igxToggle #rowEditingOverlay>
    <div [className]="bannerClass">
        <ng-container
            *ngTemplateOutlet="rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }">
        </ng-container>
    </div>
</div>

<ng-template #defaultRowEditText>
    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns
</ng-template>

<ng-template #defaultRowEditActions>
    <button igxButton igxRowEditTabStop (click)="this.endRowEditTabStop(false, $event)">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>
    <button igxButton igxRowEditTabStop (click)="this.endRowEditTabStop(true, $event)">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>
</ng-template>

<ng-template #defaultRowEditTemplate>
    <div class="igx-banner__message">
        <span class="igx-banner__text">
            <ng-container
                *ngTemplateOutlet="this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;
                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }">
            </ng-container>
        </span>
    </div>
    <div class="igx-banner__actions">
        <div class="igx-banner__row">
            <ng-container
                *ngTemplateOutlet="rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }">
            </ng-container>
        </div>
    </div>
</ng-template>

<ng-template #dragIndicatorIconBase>
    <igx-icon>drag_indicator</igx-icon>
</ng-template>

<igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>