|
3 | 3 |
|
4 | 4 | <!-- Group-by area -->
|
5 | 5 | <ng-container *ngIf="showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)">
|
6 |
| - <igx-grid-group-by-area #groupArea [style.flex-basis.px]='outerWidth' |
| 6 | + <igx-grid-group-by-area #groupArea [style.flex-basis.px]="outerWidth" |
7 | 7 | [grid]="this"
|
8 | 8 | [expressions]="groupingExpressions"
|
9 | 9 | [sortingExpressions]="sortingExpressions"
|
|
34 | 34 |
|
35 | 35 | <div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
|
36 | 36 | <div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
|
37 |
| - (dragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)' |
| 37 | + (dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)" |
38 | 38 | (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
|
39 |
| - [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant"> |
| 39 | + [style.height.px]="totalHeight" [style.width.px]="calcWidth || null" #tbody [attr.aria-activedescendant]="activeDescendant"> |
40 | 40 | <span *ngIf="moving && columnInDrag && pinnedColumns.length <= 0"
|
41 | 41 | [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
|
42 | 42 | class="igx-grid__scroll-on-drag-left"></span>
|
|
46 | 46 | <ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
|
47 | 47 | </ng-container>
|
48 | 48 | <ng-template #pinnedRecordsTemplate>
|
49 |
| - <ng-container *ngIf='data |
| 49 | + <ng-container *ngIf="data |
50 | 50 | | gridTransaction:id:pipeTrigger
|
51 | 51 | | visibleColumns:hasVisibleColumns
|
52 | 52 | | gridAddRow:true:pipeTrigger
|
53 | 53 | | gridRowPinning:id:true:pipeTrigger
|
54 | 54 | | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
|
55 |
| - | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'> |
56 |
| - <div #pinContainer *ngIf='pinnedData.length > 0' |
| 55 | + | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData"> |
| 56 | + <div #pinContainer *ngIf="pinnedData.length > 0" |
57 | 57 | [ngClass]="{
|
58 | 58 | 'igx-grid__tr--pinned-bottom': !isRowPinningToTop,
|
59 | 59 | 'igx-grid__tr--pinned-top': isRowPinningToTop
|
60 | 60 | }"
|
61 |
| - class='igx-grid__tr--pinned' [style.width.px]='calcWidth'> |
| 61 | + class="igx-grid__tr--pinned" [style.width.px]="calcWidth"> |
62 | 62 | <ng-container *ngFor="let rowData of pinnedData; let rowIndex = index">
|
63 | 63 | <ng-container *ngTemplateOutlet="pinned_record_template; context: getContext(rowData, rowIndex, true)">
|
64 | 64 | </ng-container>
|
|
77 | 77 | | gridDetails:hasDetails:expansionStates:pipeTrigger
|
78 | 78 | | gridAddRow:false:pipeTrigger
|
79 | 79 | | gridRowPinning:id:false:pipeTrigger"
|
80 |
| - let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll' |
81 |
| - [igxForContainerSize]='calcHeight' |
| 80 | + let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll" |
| 81 | + [igxForContainerSize]="calcHeight" |
82 | 82 | [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
|
83 |
| - [igxForTrackBy]='trackChanges' |
| 83 | + [igxForTrackBy]="trackChanges" |
84 | 84 | #verticalScrollContainer (chunkPreload)="dataLoading($event)" (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
|
85 | 85 | <ng-template
|
86 |
| - [igxTemplateOutlet]='getRowTemplate(rowData)' |
87 |
| - [igxTemplateOutletContext]='getContext(rowData, rowIndex)' |
88 |
| - (cachedViewLoaded)='cachedViewLoaded($event)' |
89 |
| - (viewCreated)='viewCreatedHandler($event)' |
90 |
| - (viewMoved)='viewMovedHandler($event)'> |
| 86 | + [igxTemplateOutlet]="getRowTemplate(rowData)" |
| 87 | + [igxTemplateOutletContext]="getContext(rowData, rowIndex)" |
| 88 | + (cachedViewLoaded)="cachedViewLoaded($event)" |
| 89 | + (viewCreated)="viewCreatedHandler($event)" |
| 90 | + (viewMoved)="viewMovedHandler($event)"> |
91 | 91 | </ng-template>
|
92 | 92 | </ng-template>
|
93 | 93 | <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
|
|
114 | 114 | </igx-grid-summary-row>
|
115 | 115 | </ng-template>
|
116 | 116 | <ng-template #detail_template_container let-rowIndex="index" let-rowData>
|
117 |
| - <div detail='true' style="overflow: auto; width: 100%;" id="{{id}}_{{rowIndex}}" (pointerdown)='detailsViewFocused(detailsContainer, rowIndex)' #detailsContainer [attr.data-rowindex]='rowIndex' |
| 117 | + <div detail="true" style="overflow: auto; width: 100%;" id="{{id}}_{{rowIndex}}" (pointerdown)="detailsViewFocused(detailsContainer, rowIndex)" #detailsContainer [attr.data-rowindex]="rowIndex" |
118 | 118 | [ngClass]="{
|
119 | 119 | 'igx-grid__tr-container': true,
|
120 | 120 | 'igx-grid__tr-container--active': isDetailActive(rowIndex)
|
121 | 121 | }">
|
122 |
| - <div class="igx-grid__hierarchical-indent" style='display: flex;'> |
| 122 | + <div class="igx-grid__hierarchical-indent" style="display: flex"> |
123 | 123 | <ng-container *ngIf="this.groupingExpressions.length > 0">
|
124 | 124 | <div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"></div>
|
125 | 125 | </ng-container>
|
126 | 126 | <ng-template
|
127 |
| - [ngTemplateOutlet]='detailTemplate' |
128 |
| - [ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'> |
| 127 | + [ngTemplateOutlet]="detailTemplate" |
| 128 | + [ngTemplateOutletContext]="getDetailsContext(rowData, rowIndex)"> |
129 | 129 | </ng-template>
|
130 | 130 | </div>
|
131 | 131 | </div>
|
|
136 | 136 | <igc-trial-watermark></igc-trial-watermark>
|
137 | 137 | </div>
|
138 | 138 | <div igxToggle #loadingOverlay>
|
139 |
| - <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'> |
| 139 | + <igx-circular-bar [indeterminate]="true" *ngIf="shouldOverlayLoading"> |
140 | 140 | </igx-circular-bar>
|
141 | 141 | </div>
|
142 | 142 | <span *ngIf="moving && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
|
143 | 143 | id="right" class="igx-grid__scroll-on-drag-right"></span>
|
144 |
| - <div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()"> |
145 |
| - <div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div> |
146 |
| - <div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'> |
147 |
| - <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template> |
| 144 | + <div [hidden]="!hasVerticalScroll()" class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()"> |
| 145 | + <div class="igx-grid__tbody-scrollbar-start" [style.height.px]="isRowPinningToTop ? pinnedRowHeight : 0"></div> |
| 146 | + <div class="igx-grid__tbody-scrollbar-main" [style.height.px]="calcHeight"> |
| 147 | + <ng-template igxGridFor [igxGridForOf]="[]" #verticalScrollHolder></ng-template> |
148 | 148 | </div>
|
149 |
| - <div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div> |
| 149 | + <div class="igx-grid__tbody-scrollbar-end" [style.height.px]="!isRowPinningToTop ? pinnedRowHeight : 0"></div> |
150 | 150 | </div>
|
151 | 151 |
|
152 | 152 | <div class="igx-grid__addrow-snackbar">
|
153 |
| - <igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="resourceStrings.igx_grid_snackbar_addrow_actiontext" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar> |
| 153 | + <igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="resourceStrings.igx_grid_snackbar_addrow_actiontext" [displayTime]="snackbarDisplayTime">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar> |
154 | 154 | </div>
|
155 | 155 |
|
156 | 156 | <div #igxBodyOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>
|
157 | 157 | <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
|
158 | 158 | </div>
|
159 | 159 |
|
160 | 160 |
|
161 |
| -<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summaryRowHeight' #tfoot> |
| 161 | +<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]="summaryRowHeight" #tfoot> |
162 | 162 | <div tabindex="0" (focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" [attr.aria-activedescendant]="activeDescendant">
|
163 |
| - <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight' |
| 163 | + <igx-grid-summary-row [style.width.px]="calcWidth" [style.height.px]="summaryRowHeight" |
164 | 164 | *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
|
165 | 165 | [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
|
166 | 166 | class="igx-grid__summaries" #summaryRow>
|
167 | 167 | </igx-grid-summary-row>
|
168 |
| - <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight' |
| 168 | + <div class="igx-grid__tfoot-thumb" [hidden]="!hasVerticalScroll()" [style.height.px]="summaryRowHeight" |
169 | 169 | [style.width.px]="scrollSize"></div>
|
170 | 170 | </div>
|
171 | 171 | </div>
|
172 | 172 |
|
173 | 173 | <div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
|
174 |
| - <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div> |
175 |
| - <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'> |
176 |
| - <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer> |
| 174 | + <div class="igx-grid__scroll-start" [style.width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth" [style.min-width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth"></div> |
| 175 | + <div class="igx-grid__scroll-main" [style.width.px]="unpinnedWidth"> |
| 176 | + <ng-template igxGridFor [igxGridForOf]="EMPTY_DATA" #scrollContainer> |
177 | 177 | </ng-template>
|
178 | 178 | </div>
|
179 |
| - <div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div> |
| 179 | + <div class="igx-grid__scroll-end" [style.float]="'right'" [style.width.px]="pinnedWidth" [style.min-width.px]="pinnedWidth" [hidden]="pinnedWidth === 0 || isPinningToStart"></div> |
180 | 180 | </div>
|
181 | 181 |
|
182 | 182 | <div class="igx-grid__footer" #footer>
|
|
187 | 187 | <ng-template #emptyFilteredGrid>
|
188 | 188 | <span class="igx-grid__tbody-message" role="cell">
|
189 | 189 | <span>{{emptyFilteredGridMessage}}</span>
|
190 |
| - <span *ngIf='showAddButton'> |
191 |
| - <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container> |
| 190 | + <span *ngIf="showAddButton"> |
| 191 | + <ng-container *ngTemplateOutlet="addRowEmptyTemplate || defaultAddRowEmptyTemplate"></ng-container> |
192 | 192 | </span>
|
193 | 193 | </span>
|
194 | 194 | </ng-template>
|
|
197 | 197 | <span class="igx-grid__tbody-message" role="cell">
|
198 | 198 | <span>{{emptyGridMessage}}</span>
|
199 | 199 | <span *ngIf='showAddButton'>
|
200 |
| - <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container> |
| 200 | + <ng-container *ngTemplateOutlet="addRowEmptyTemplate || defaultAddRowEmptyTemplate"></ng-container> |
201 | 201 | </span>
|
202 | 202 | </span>
|
203 | 203 | </ng-template>
|
|
0 commit comments