igniteui-angular-sovn

<ng-content select="igx-grid-toolbar"></ng-content> <ng-container #toolbarOutlet></ng-container> <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" (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [attr.aria-activedescendant]="activeDescendant" [attr.role]="dataView.length ? null : 'row'" [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 | gridTransaction:id:pipeTrigger | visibleColumns:hasVisibleColumns | gridAddRow:true:pipeTrigger | gridRowPinning:id:true:pipeTrigger | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData"> <div #pinContainer *ngIf="pinnedData.length > 0" class="igx-grid__tr--pinned" [ngClass]="{ 'igx-grid__tr--pinned-bottom': !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }" [style.width.px]="calcWidth"> <ng-container *ngFor="let rowData of pinnedData; let rowIndex = index"> <ng-container *ngTemplateOutlet="pinned_hierarchical_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 let-rowIndex="index" [igxGridForOf]="data | gridTransaction:id:pipeTrigger | visibleColumns:hasVisibleColumns | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger | gridAddRow:false:pipeTrigger | gridRowPinning:id:false:pipeTrigger" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll" [igxForContainerSize]="calcHeight" [igxForItemSize]="renderedRowHeight" [igxForTrackBy]="trackChanges" #verticalScrollContainer (chunkPreload)="dataLoading($event)" (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)"> <ng-template [igxTemplateOutlet]="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))" [igxTemplateOutletContext]="getContext(rowData, rowIndex, false)" (viewCreated)="viewCreatedHandler($event)" (viewMoved)="viewMovedHandler($event)" (cachedViewLoaded)="cachedViewLoaded($event)"> </ng-template>  </ng-template> <ng-template #hierarchical_record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData> <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [disabled]="disabledRow" [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> </igx-hierarchical-grid-row> </ng-template> <ng-template #pinned_hierarchical_record_template let-rowIndex="index" let-rowData> <igx-hierarchical-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-hierarchical-grid-row> </ng-template> <ng-template #child_record_template let-rowIndex="index" let-rowData> <div style="overflow: auto; width: 100%;" [attr.data-rowindex]="rowIndex" (scroll)="onContainerScroll()" [ngClass]="{ 'igx-grid__tr-container': true, 'igx-grid__tr--highlighted':isRowHighlighted(rowData) }"> <igx-child-grid-row *ngFor="let layout of childLayoutList" [parentGridID]="id" [index]="rowIndex" [data]="rowData" [layout]="layout" #row> </igx-child-grid-row> </div> </ng-template> <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null"> </ng-container> <ng-container *ngTemplateOutlet="template"></ng-container> <span *ngIf="moving && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="right" class="igx-grid__scroll-on-drag-right"></span> <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div> <igc-trial-watermark *ngIf="!this.parent"></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 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)" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.summaryNav($event)"> <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> <ng-container #paginatorOutlet></ng-container> </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 #defaultCollapsedTemplate> <igx-icon role="button">unfold_more</igx-icon> </ng-template> <ng-template #defaultExpandedTemplate> <igx-icon role="button" [active]="hasExpandedRecords() && hasExpandableChildren">unfold_less</igx-icon> </ng-template> <div *ngIf="rowEditable" igxToggle #rowEditingOverlay> <div [className]="bannerClass"> <ng-container *ngTemplateOutlet="resolveRowEditContainer; 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 : resolveRowEditText || 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="resolveRowEditActions || 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>