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

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

<!-- Toolbar area -->
<ng-content select="igx-grid-toolbar"></ng-content>

<!-- Group-by area -->
<ng-container *ngIf="showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)">
    <igx-grid-group-by-area #groupArea [style.flex-basis.px]="outerWidth"
        [grid]="this"
        [expressions]="groupingExpressions"
        [sortingExpressions]="sortingExpressions"
        [density]="displayDensity"
        [dropAreaTemplate]="dropAreaTemplate"
        [dropAreaMessage]="dropAreaMessage"
    >
    </igx-grid-group-by-area>
</ng-container>

<!-- Grid table head row area -->
<igx-grid-header-row class="igx-grid-thead" tabindex="0"
    [grid]="this"
    [hasMRL]="hasColumnLayouts"
    [density]="displayDensity"
    [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)"
    (scroll)="preventHeaderScroll($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" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
        (dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
        (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
        [style.height.px]="totalHeight" [style.width.px]="calcWidth || null" #tbody [attr.aria-activedescendant]="activeDescendant">
        <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-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
    </ng-container>
    <ng-template #pinnedRecordsTemplate>
        <ng-container *ngIf="data
        | gridTransaction:id:pipeTrigger
        | visibleColumns:hasVisibleColumns
        | gridAddRow:true:pipeTrigger
        | gridRowPinning:id:true:pipeTrigger
        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id: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-template igxGridFor let-rowData [igxGridForOf]="data
        | gridTransaction:id:pipeTrigger
        | visibleColumns:hasVisibleColumns
        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger
        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger
        | gridPaging:!!paginator:page:perPage:pipeTrigger
        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
        | gridDetails:hasDetails:expansionStates:pipeTrigger
        | gridAddRow:false:pipeTrigger
        | gridRowPinning:id:false:pipeTrigger"
            let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
            [igxForContainerSize]="calcHeight"
            [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
            [igxForTrackBy]="trackChanges"
            #verticalScrollContainer (chunkPreload)="dataLoading($event)" (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
            <ng-template
                [igxTemplateOutlet]="getRowTemplate(rowData)"
                [igxTemplateOutletContext]="getContext(rowData, rowIndex)"
                (cachedViewLoaded)="cachedViewLoaded($event)"
                (viewCreated)="viewCreatedHandler($event)"
                (viewMoved)="viewMovedHandler($event)">
            </ng-template>
        </ng-template>
        <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
        </ng-container>
        <ng-template #record_template let-rowIndex="index" let-rowData let-disabledRow="disabled">
            <igx-grid-row [gridID]="id" [index]="rowIndex" [data]="rowData" [disabled]="disabledRow"
                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
                [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
            </igx-grid-row>
        </ng-template>
        <ng-template #pinned_record_template let-rowIndex="index" let-rowData>
            <igx-grid-row [gridID]="id" [index]="rowIndex" [data]="rowData"
                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
                [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger"#row #pinnedRow>
            </igx-grid-row>
        </ng-template>
        <ng-template #group_template let-rowIndex="index" let-rowData>
            <igx-grid-groupby-row [gridID]="id" [index]="rowIndex" [groupRow]="rowData" [hideGroupRowSelectors]="hideRowSelectors" [rowDraggable]="rowDraggable" #row>
            </igx-grid-groupby-row>
        </ng-template>
        <ng-template #summary_template let-rowIndex="index" let-rowData>
            <igx-grid-summary-row role="row" [gridID]="id" [summaries]="rowData.summaries" [index]="rowIndex"
                class="igx-grid__summaries--body" #summaryRow>
            </igx-grid-summary-row>
        </ng-template>
        <ng-template #detail_template_container let-rowIndex="index" let-rowData>
            <div detail="true" style="overflow: auto; width: 100%;" id="{{id}}_{{rowIndex}}" (pointerdown)="detailsViewFocused(detailsContainer, rowIndex)" #detailsContainer [attr.data-rowindex]="rowIndex"
                [ngClass]="{
                'igx-grid__tr-container': true,
                'igx-grid__tr-container--active': isDetailActive(rowIndex)
            }">
                <div class="igx-grid__hierarchical-indent" style="display: flex">
                        <ng-container *ngIf="this.groupingExpressions.length > 0">
                                <div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"></div>
                        </ng-container>
                        <ng-template
                    [ngTemplateOutlet]="detailTemplate"
                    [ngTemplateOutletContext]="getDetailsContext(rowData, rowIndex)">
                    </ng-template>
                </div>
            </div>
        </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()">
        <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 #igxBodyOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>
    <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></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]="EMPTY_DATA" #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>

<ng-template #defaultExpandedTemplate>
    <igx-icon role="button" class="igx-grid__group-expand-btn"
   [ngClass]="{
    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible
}">unfold_less</igx-icon>
</ng-template>

 <ng-template #defaultCollapsedTemplate>
    <igx-icon role="button" class="igx-grid__group-expand-btn"
    [ngClass]="{
    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible
}">unfold_more</igx-icon>
</ng-template>

<div *ngIf="rowEditable" igxToggle #rowEditingOverlay>
    <div [className]="bannerClass">
        <ng-container
            *ngTemplateOutlet="rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.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 type="button" (click)="this.endRowEditTabStop(false, $event)">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>
    <button igxButton igxRowEditTabStop type="button" (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__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>