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

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

<ng-container *ngTemplateOutlet="addRowUI ? addTemp : defaultTemp"></ng-container>

<ng-template #addTemp>
    <div class="igx-grid__tr--inner" [class.igx-grid__tr--add-animate]="triggerAddAnimationClass" (animationend)="animationEndHandler()">
        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>
    </div>
</ng-template>
<ng-template #defaultTemp>
    <ng-container *ngIf="rowDraggable">
        <div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.getDragGhostCustomTemplate()">
            <ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
        </div>
    </ng-container>
    <ng-container *ngIf="this.showRowSelectors">
        <div class="igx-grid__cbx-selection igx-grid__tr-action" (pointerdown)="$event.preventDefault()" (click)="onRowSelectorClick($event)">
            <ng-template *ngTemplateOutlet="
                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}">
            </ng-template>
        </div>
    </ng-container>
    <ng-container *ngIf="grid.groupingExpressions.length > 0">
        <div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}" (pointerdown)="$event.preventDefault()" (click)="$event.stopPropagation()"></div>
    </ng-container>


    <ng-container *ngIf="!grid.hasColumnLayouts">
        <ng-container *ngIf="pinnedColumns.length > 0 && grid.isPinningToStart">
            <ng-template ngFor let-col [ngForOf]="pinnedColumns | igxNotGrouped">
                    <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
            </ng-template>
        </ng-container>
        <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForSizePropName]="'calcPixelWidth'" [igxForTrackBy]="grid.trackColumnChanges" #igxDirRef>
            <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
        </ng-template>
        <ng-container *ngIf="pinnedColumns.length > 0 && !grid.isPinningToStart">
            <ng-template ngFor let-col [ngForOf]="pinnedColumns | igxNotGrouped">
                    <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
            </ng-template>
        </ng-container>
    </ng-container>

    <ng-container *ngIf="grid.hasColumnLayouts">
        <ng-container *ngIf="pinnedColumns.length > 0 && grid.isPinningToStart">
            <ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)"></ng-container>
        </ng-container>
        <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxTopLevel" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForSizePropName]="'calcPixelWidth'" [igxForTrackBy]="grid.trackColumnChanges" #igxDirRef>
            <div class="igx-grid__mrl-block" [ngStyle]="{
                'grid-template-rows':col.getGridTemplate(true),
                'grid-template-columns':col.getGridTemplate(false)
            }">
                <ng-template ngFor let-col [ngForOf]="col.children">
                        <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)"></ng-container>
                </ng-template>
            </div>
        </ng-template>

        <ng-container *ngIf="pinnedColumns.length > 0 && !grid.isPinningToStart">
            <ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)"></ng-container>
        </ng-container>
    </ng-container>
</ng-template>

<ng-template #mrlPinnedTemplate let-pinnedColumns>
    <div *ngFor="let col of pinnedColumns | igxTopLevel" class="igx-grid__mrl-block"
        [class.igx-grid__td--pinned-last]="col.hasLastPinnedChildColumn"
        [class.igx-grid__td--pinned-first]="col.hasFirstPinnedChildColumn"
        [style.left]="mrlRightPinnedOffset"
        [ngStyle]="{
            'grid-template-rows':col.getGridTemplate(true),
            'grid-template-columns':col.getGridTemplate(false),
            'z-index': col.pinned ? 1 : null
        }">
        <ng-template ngFor let-col [ngForOf]="col.children">
                <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)"></ng-container>
        </ng-template>
    </div>
</ng-template>

<ng-template #rowSelectorBaseTemplate>
    <div class="igx-grid__cbx-padding">
        <igx-checkbox
            [tabindex]="-1"
            [checked]="selected"
            [readonly]="true"
            [disabled]="deleted"
            [disableRipple]="true"
            [disableTransitions]="grid.disableTransitions"
            [aria-label]="rowCheckboxAriaLabel">
        </igx-checkbox>
    </div>
</ng-template>

<ng-template #cellTemplate let-col>
    <igx-grid-cell
        class="igx-grid__td igx-grid__td--fw"
        [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
        [class.igx-grid__td--pinned]="col.pinned"
        [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
        [class.igx-grid__td--bool]="col.dataType === 'boolean'"
        [class.igx-grid__td--image]="col.dataType === 'image'"
        [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
        [ngStyle]="col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
        [editMode]="col.editable && this.grid.crudService.targetInEdit(index, col.index)"
        [column]="col"
        [formatter]="col.formatter"
        [intRow]="this"
        [lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
        [firstPinned]="col.columnLayoutChild ? null : col.isFirstPinned"
        [style.min-height.px]="cellHeight"
        [rowData]="data"
        [style.min-width]="col.width"
        [style.max-width]="col.width"
        [style.flex-basis]="col.width"
        [style.left]="col.rightPinnedOffset"
        [width]="col.getCellWidth()"
        [visibleColumnIndex]="col.visibleIndex"
        [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
        [cellTemplate]="col.bodyTemplate"
        [cellValidationErrorTemplate]="col.errorTemplate"
        [lastSearchInfo]="grid.lastSearchInfo"
        [active]="isCellActive(col.visibleIndex)"
        [cellSelectionMode]="grid.cellSelection"
        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
        #cell>
    </igx-grid-cell>
</ng-template>

<ng-template #expandableCellTemplate let-col>
    <igx-expandable-grid-cell
        [class.igx-grid__td--pinned]="col.pinned"
        class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
        [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
        [class.igx-grid__td--number]="(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0"
        [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
        [ngStyle]="col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
        [expanded]="expanded"
        [editMode]="col.editable && this.grid.crudService.targetInEdit(index, col.index)"
        [column]="col"
        [formatter]="col.formatter"
        [intRow]="this"
        [lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
        [style.min-height.px]="cellHeight"
        [rowData]="data"
        [style.min-width]="col.width"
        [style.max-width]="col.width"
        [style.flex-basis]="col.width"
        [width]="col.getCellWidth()"
        [visibleColumnIndex]="col.visibleIndex"
        [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
        [cellTemplate]="col.bodyTemplate"
        [cellValidationErrorTemplate]="col.errorTemplate"
        [lastSearchInfo]="grid.lastSearchInfo"
        [active]="isCellActive(col.visibleIndex)"
        [cellSelectionMode]="grid.cellSelection"
        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
        #cell>
    </igx-expandable-grid-cell>
</ng-template>

<ng-template #mrlCellTemplate let-col>
    <igx-grid-cell
        class="igx-grid__td igx-grid__td--fw"
        [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"

        [class.igx-grid__td--pinned]="col.pinned"
        [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
        [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
        [ngStyle]="col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
        [editMode]="col.editable && this.grid.crudService.targetInEdit(index, col.index)"
        [column]="col"
        [style.grid-row-end]="col.rowEnd"
        [style.grid-column-end]="col.colEnd"
        [style.grid-row-start]="col.rowStart"
        [style.grid-column-start]="col.colStart"
        [lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
        [firstPinned]="col.columnLayoutChild ? null : col.isFirstPinned"
        [formatter]="col.formatter"
        [intRow]="this"
        [style.min-height.px]="cellHeight"
        [rowData]="data"
        [visibleColumnIndex]="col.visibleIndex"
        [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
        [cellTemplate]="col.bodyTemplate"
        [cellValidationErrorTemplate]="col.errorTemplate"
        [lastSearchInfo]="grid.lastSearchInfo"
        [active]="isCellActive(col.visibleIndex)"
        [cellSelectionMode]="grid.cellSelection"
        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
        #cell>
    </igx-grid-cell>
</ng-template>

<ng-template #mrlExpandableCellTemplate let-col>
    <igx-expandable-grid-cell
        class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
        [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"

        [class.igx-grid__td--pinned]="col.pinned"
        [class.igx-grid__td--number]="(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0"
        [ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
        [ngStyle]="col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
        [expanded]="expanded"
        [editMode]="col.editable && this.grid.crudService.targetInEdit(index, col.index)"
        [column]="col"
        [style.grid-row-end]="col.rowEnd"
        [style.grid-column-end]="col.colEnd"
        [style.grid-row-start]="col.rowStart"
        [style.grid-column-start]="col.colStart"
        [lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
        [formatter]="col.formatter"
        [intRow]="this"
        [style.min-height.px]="cellHeight"
        [rowData]="data"
        [visibleColumnIndex]="col.visibleIndex"
        [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
        [cellTemplate]="col.bodyTemplate"
        [cellValidationErrorTemplate]="col.errorTemplate"
        [lastSearchInfo]="grid.lastSearchInfo"
        [active]="isCellActive(col.visibleIndex)"
        [cellSelectionMode]="grid.cellSelection"
        [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
        #cell>
    </igx-expandable-grid-cell>
</ng-template>