igniteui-angular-sovn/src/lib/grids/tree-grid/tree-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="showRowSelectors">
    <div class="igx-grid__cbx-selection igx-grid__tr-action" (click)="onRowSelectorClick($event)" (pointerdown)="$event.preventDefault()">
        <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="pinnedColumns.length > 0 && grid.isPinningToStart">
    <ng-container *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-container>
</ng-container>
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]="'calcPixelWidth'" [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
    <ng-template #cellTemplate>
        <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--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
            [class.igx-grid__td--bool]="col.dataType === 'boolean'"
            [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"
            [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)"
            #treeCell>
        </igx-grid-cell>
    </ng-template>
    <ng-template #treeCellTemplate>
        <igx-tree-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--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"
            [level]="treeRow.level"
            [expanded]="expanded"
            [showIndicator]="showIndicator"
            [editMode]="col.editable && this.grid.crudService.targetInEdit(index, col.index)"
            [column]="col"
            [formatter]="col.formatter"
            [intRow]="this"
            [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"
            [isLoading]="isLoading"
            [cellTemplate]="col.bodyTemplate"
            [cellValidationErrorTemplate]="col.errorTemplate"
            [lastSearchInfo]="grid.lastSearchInfo"
            [active]="isCellActive(col.visibleIndex)"
            [cellSelectionMode]="grid.cellSelection"
            [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
            #treeCell>
        </igx-tree-grid-cell>
    </ng-template>
    <ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
</ng-template>
<ng-container *ngIf="pinnedColumns.length > 0 && !grid.isPinningToStart">
    <ng-container *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-container>
</ng-container>
<ng-template #rowSelectorBaseTemplate>
    <div class="igx-grid__cbx-padding">
        <igx-checkbox
            [tabindex]="-1"
            [readonly]="true"
            [checked]="selected"
            [indeterminate]="indeterminate"
            [disabled]="deleted"
            [disableRipple]="true"
            [disableTransitions]="grid.disableTransitions"
            [aria-label]="rowCheckboxAriaLabel">
        </igx-checkbox>
    </div>
</ng-template>

<ng-template #pinnedCellsTemplate let-col>
    <ng-template ngFor let-col [ngForOf]="pinnedColumns | igxNotGrouped">
        <ng-template #cellTemplate>
            <igx-grid-cell
                class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
                [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'"
                [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"
                [firstPinned]="col.isFirstPinned"
                [lastPinned]="col.isLastPinned"
                [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)"
                #treeCell>
            </igx-grid-cell>
            </ng-template>
        <ng-template #treeCellTemplate>
            <igx-tree-grid-cell
                class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell igx-grid__td--pinned"
                [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"
                [level]="treeRow.level"
                [expanded]="expanded"
                [showIndicator]="showIndicator"
                [editMode]="col.editable && this.grid.crudService.targetInEdit(index, col.index)"
                [column]="col"
                [formatter]="col.formatter"
                [intRow]="this"
                [lastPinned]="col.isLastPinned"
                [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"
                [isLoading]="isLoading"
                [cellTemplate]="col.bodyTemplate"
                [cellValidationErrorTemplate]="col.errorTemplate"
                [lastSearchInfo]="grid.lastSearchInfo"
                [active]="isCellActive(col.visibleIndex)"
                [cellSelectionMode]="grid.cellSelection"
                [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
                #treeCell>
            </igx-tree-grid-cell>
        </ng-template>
        <ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
    </ng-template>
</ng-template>