<app-header [title]="'販売予測数量自動計算期間一覧画面'" [logoText]="'販売予測システム'"></app-header> <div class="content-wrapper"> <div class="content-table-wrapper my-elem"> <div class="table-wrap"> <igx-tabs class="w-100 h-100" [disableAnimation]="true"> <igx-tab-item> <igx-tab-header [ngClass]="{'tab-selected': selectedTab === 1}" (click)="selectTab(1)" class="w-25 tab-unselected"> 量産 </igx-tab-header> <igx-tab-content class="padding-tab"> <div class="note-wrap"> <div class="p-1 bg-range1"> 計算範囲 </div> <div class="p-1 bg-range2 margin-note"> 反映先 </div> </div> <igx-grid #grid1 width="100%" [emptyFilteredGridMessage]="'対象データがありません。'" [emptyGridMessage]="'対象データがありません。'" [data]="data" [displayDensity]="'cosy'" [allowFiltering]="true" [primaryKey]="'customerCorporateCode'" (selected)="checkEdit ? checkSelectStart($event) : null" (rangeSelected)= "checkEdit ? setCellSelection($event, grid1, 'onRangeSelectionTab1') : null" > <igx-column [pinned]="true" [filterable]="false" [width]="'60px'"> <ng-template igxCell let-cell="cell"> <span class="text-center w-100"> {{ paginator.page < 1 ? cell._rowIndex + 1 : (cell._rowIndex + 1) + paginator.page * paginator.perPage }} </span> </ng-template> </igx-column> <igx-column [pinned]="true" field="customerCorporateName" header="得意先法人名" [filterable]="true" [sortable]="true" ></igx-column> <igx-column [pinned]="true" field="customerCorporateCode" header="得意先コード" [filterable]="true" [sortable]="true" [cellClasses]="checkBorderRight" ></igx-column> <igx-column-group [pinned]="true" header="計算範囲"> <igx-column field="referenceMonth1" header="基準月" [filterable]="true" [filterCellTemplate]="defaultFilterTemplateOption1" > <ng-template igxCell let-cell="cell"> <div class="custom-select-option" *ngIf="checkEdit"> <igx-select [(ngModel)]="cell.value" (ngModelChange)="onOptionChange($event, cell, 1)" > <igx-select-item *ngFor="let option of option1" [value]="option.code"> {{ option.name }} </igx-select-item> </igx-select> </div> <div *ngIf="!checkEdit"> <span>{{ calculateOption(cell.value, option1) }}</span> </div> </ng-template> </igx-column> <igx-column field="calculationSourceFrom1" header="from" [filterable]="false"> <ng-template igxCell let-cell="cell"> <div> <span>{{ getMonth(cell.value, cell.row.data.referenceMonth1) }}</span> </div> </ng-template> </igx-column> <igx-column field="calculationSourceTo1" header="to" [filterable]="false" [cellClasses]="checkBorderRight"> <ng-template igxCell let-cell="cell"> <div> <span>{{ getMonth(cell.value, cell.row.data.referenceMonth1) }}</span> </div> </ng-template> </igx-column> </igx-column-group> <igx-column-group [pinned]="true" header="反映先"> <igx-column field="reflectionDestinationFrom1" header="from" [filterable]="false" [cellClasses]="{'custom-reflection': true}" > <ng-template igxCell let-cell="cell"> <div> <span>{{ getMonth(cell.value, cell.row.data.referenceMonth1) }}</span> </div> </ng-template> </igx-column> </igx-column-group> <igx-column-group *ngFor="let year of years" [header]="year.toString()"> <igx-column *ngFor="let column of monthColumns | filterByYear:year" [width]="'50px'" [field]="column.field" [header]="column.header" [filterable]="false" [cellClasses]="setValeColor(1)" > </igx-column> </igx-column-group> <igx-paginator #paginator [perPage]="10"></igx-paginator> </igx-grid> </igx-tab-content> </igx-tab-item> <igx-tab-item> <igx-tab-header [ngClass]="{'tab-selected': selectedTab === 2}" (click)="selectTab(2)" class="w-25 tab-unselected"> 補給 </igx-tab-header> <igx-tab-content class="padding-tab"> <div class="note-wrap"> <div class="p-1 bg-range1"> 計算範囲 </div> <div class="p-1 bg-range2 margin-note"> 反映先 </div> </div> <igx-grid #grid2 width="100%" [emptyFilteredGridMessage]="'対象データがありません。'" [emptyGridMessage]="'対象データがありません。'" [data]="data" [displayDensity]="'cosy'" [allowFiltering]="true" [primaryKey]="'customerCorporateCode'" (selected)="checkEdit ? checkSelectStart($event) : null" (rangeSelected)= "checkEdit ? setCellSelection($event, grid2, 'onRangeSelectionTab2') : null" > <igx-column [pinned]="true" [filterable]="false" [width]="'60px'"> <ng-template igxCell let-cell="cell"> <span class="text-center w-100"> {{ paginator.page < 1 ? cell._rowIndex + 1 : (cell._rowIndex + 1) + paginator.page * paginator.perPage }} </span> </ng-template> </igx-column> <igx-column [pinned]="true" field="customerCorporateName" header="得意先法人名" [filterable]="true" [sortable]="true" ></igx-column> <igx-column [pinned]="true" field="customerCorporateCode" header="得意先コード" [filterable]="true" [sortable]="true" [cellClasses]="checkBorderRight" ></igx-column> <igx-column-group [pinned]="true" header="計算範囲"> <igx-column field="referenceMonth2" header="基準月" [filterable]="true" [filterCellTemplate]="defaultFilterTemplateOption1" > <ng-template igxCell let-cell="cell"> <div class="custom-select-option" *ngIf="checkEdit"> <igx-select [(ngModel)]="cell.value" (ngModelChange)="onOptionChange($event, cell, 2)" > <igx-select-item *ngFor="let option of option1" [value]="option.code"> {{ option.name }} </igx-select-item> </igx-select> </div> <div *ngIf="!checkEdit"> <span>{{ calculateOption(cell.value, option1) }}</span> </div> </ng-template> </igx-column> <igx-column field="calculationSourceFrom2" header="from" [filterable]="false"> <ng-template igxCell let-cell="cell"> <div> <span>{{ getMonth(cell.value, cell.row.data.referenceMonth2) }}</span> </div> </ng-template> </igx-column> <igx-column field="calculationSourceTo2" header="to" [filterable]="false" [cellClasses]="checkBorderRight"> <ng-template igxCell let-cell="cell"> <div> <span>{{ getMonth(cell.value, cell.row.data.referenceMonth2) }}</span> </div> </ng-template> </igx-column> </igx-column-group> <igx-column-group [pinned]="true" header="反映先"> <igx-column field="reflectionDestinationFrom2" header="from" [filterable]="false" [cellClasses]="{'custom-reflection': true}" > <ng-template igxCell let-cell="cell"> <div> <span>{{ getMonth(cell.value, cell.row.data.referenceMonth2) }}</span> </div> </ng-template> </igx-column> </igx-column-group> <igx-column-group *ngFor="let year of years" [header]="year.toString()"> <igx-column [width]="'50px'" *ngFor="let column of monthColumns | filterByYear:year" [field]="column.field" [header]="column.header" [filterable]="false" [cellClasses]="setValeColor(2)" > </igx-column> </igx-column-group> <igx-paginator #paginator [perPage]="10"></igx-paginator> </igx-grid> </igx-tab-content> </igx-tab-item> <igx-tab-item> <igx-tab-header [ngClass]="{'tab-selected': selectedTab === 3}" (click)="selectTab(3)" class="w-25 tab-unselected"> 試作 </igx-tab-header> <igx-tab-content class="padding-tab"> <div class="note-wrap"> <div class="p-1 bg-range1"> 計算範囲 </div> <div class="p-1 bg-range2 margin-note"> 反映先 </div> </div> <igx-grid #grid3 width="100%" [emptyFilteredGridMessage]="'対象データがありません。'" [emptyGridMessage]="'対象データがありません。'" [data]="data" [displayDensity]="'cosy'" [allowFiltering]="true" [primaryKey]="'customerCorporateCode'" (selected)="checkEdit ? checkSelectStart($event) : null" (rangeSelected)= "checkEdit ? setCellSelection($event, grid3, 'onRangeSelectionTab3') : null" > <igx-column [pinned]="true" [filterable]="false" [width]="'60px'"> <ng-template igxCell let-cell="cell"> <span class="text-center w-100"> {{ paginator.page < 1 ? cell._rowIndex + 1 : (cell._rowIndex + 1) + paginator.page * paginator.perPage }} </span> </ng-template> </igx-column> <igx-column [pinned]="true" field="customerCorporateName" header="得意先法人名" [filterable]="true" [sortable]="true" ></igx-column> <igx-column [pinned]="true" field="customerCorporateCode" header="得意先コード" [filterable]="true" [sortable]="true" [cellClasses]="checkBorderRight" ></igx-column> <igx-column-group [pinned]="true" header="計算範囲"> <igx-column field="referenceMonth3" header="基準月" [filterable]="true" [filterCellTemplate]="defaultFilterTemplateOption1" > <ng-template igxCell let-cell="cell"> <div class="custom-select-option" *ngIf="checkEdit"> <igx-select [(ngModel)]="cell.value" (ngModelChange)="onOptionChange($event, cell, 3)" > <igx-select-item *ngFor="let option of option1" [value]="option.code"> {{ option.name }} </igx-select-item> </igx-select> </div> <div *ngIf="!checkEdit"> <span>{{ calculateOption(cell.value, option1) }}</span> </div> </ng-template> </igx-column> <igx-column field="calculationSourceFrom3" header="from" [filterable]="false"> <ng-template igxCell let-cell="cell"> <div> <span>{{ getMonth(cell.value, cell.row.data.referenceMonth3) }}</span> </div> </ng-template> </igx-column> <igx-column field="calculationSourceTo3" header="to" [filterable]="false" [cellClasses]="checkBorderRight"> <ng-template igxCell let-cell="cell"> <div> <span>{{ getMonth(cell.value, cell.row.data.referenceMonth3) }}</span> </div> </ng-template> </igx-column> </igx-column-group> <igx-column-group [pinned]="true" header="反映先"> <igx-column field="reflectionDestinationFrom3" header="from" [filterable]="false" [cellClasses]="{'custom-reflection': true}" > <ng-template igxCell let-cell="cell"> <div> <span>{{ getMonth(cell.value, cell.row.data.referenceMonth3) }}</span> </div> </ng-template> </igx-column> </igx-column-group> <igx-column-group *ngFor="let year of years" [header]="year.toString()"> <igx-column [width]="'50px'" *ngFor="let column of monthColumns | filterByYear:year" [field]="column.field" [header]="column.header" [filterable]="false" [cellClasses]="setValeColor(3)" > </igx-column> </igx-column-group> <igx-paginator #paginator [perPage]="10"></igx-paginator> </igx-grid> </igx-tab-content> </igx-tab-item> </igx-tabs> </div> <ng-template #defaultFilterTemplateOption1 igxFilterCellTemplate let-column="column"> <div class="filter-cell"> <div class="custom-select-option" *ngIf="checkEdit"> <igx-select [(ngModel)]="valueHeaderOption[column.visibleIndex]" (ngModelChange)="setValueOption(column)" > <igx-select-item *ngFor="let option of option1" [value]="option.code"> {{ option.name }} </igx-select-item> </igx-select> </div> </div> </ng-template> </div> <div class="group-btn d-flex"> <div class='button-back'> <button [routerLink]="'/'"> <img src='/assets/images/icons/icon-back.svg' alt='' width='16' height='16'> <span>トップメニューに戻る</span> </button> </div> <div *ngIf="!checkEdit" class="button-edit"> <button (click)="changeValueCheckEdit()"> <img src="/assets/images/icons/icon-edit.svg" alt="" width="16" height="16"> <span>自動計算期間編集</span> </button> </div> <div *ngIf="checkEdit"> <button class="button-save" (click)="saveValue()"> <img src="/assets/images/icons/icon-save.svg" alt="" width="16" height="16"> <span>自動計算期間更新</span> </button> </div> </div> </div> <app-loading [loading]="loading"></app-loading> <app-success-modal [showModal]="showModal" [title]="'自動計算期間更新完了'" [content]="'自動計算期間を更新しました。'" (setCloseModal)="setCloseModal($event)"> </app-success-modal> <app-detail-error-modal [showModal]="showModalError" [title]="'自動計算期間更新エラー'" [content]="'自動計算期間更新に失敗しました。再度お試してください。'" (setCloseModalError)="setCloseModalError($event)"> </app-detail-error-modal>
on tab1 drag scroll to the rightgo to page 2click on tab 2 or 3scroll to the rightclick on page 2 on tab 3go back to tab 1
Hello,
I have added column groups to the sample, however, I am still not able to reproduce the described behavior. The scrollbar is preserved when navigating between the tabs.
Please test the modified sample on your side and let me know how it behaves. If the behavior cannot be replicated, please provide your own isolated sample, demonstrating the behavior. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach it in this case.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.
Thank you for your cooperation.
Looking forward to hearing from you.
Regards, Monika Kirkova, Infragistics
My problem is that the title is looping from 2 arrays to display, not fixed
year = [2023, 2024, 2025, 2026]
monthColumns [ { "header": "04", "field": "2023_04" }, { "header": "05", "field": "2023_05" }, { "header": "06", "field": "2023_06" }, { "header": "07", "field": "2023_07" }, { "header": "08", "field": "2023_08" }, { "header": "09", "field": "2023_09" }, { "header": "10", "field": "2023_10" }, { "header": "11", "field": "2023_11" }, { "header": "12", "field": "2023_12" }, { "header": "01", "field": "2024_01" }, { "header": "02", "field": "2024_02" }, { "header": "03", "field": "2024_03" }, { "header": "04", "field": "2024_04" }, { "header": "05", "field": "2024_05" }, { "header": "06", "field": "2024_06" }, { "header": "07", "field": "2024_07" }, { "header": "08", "field": "2024_08" }, { "header": "09", "field": "2024_09" }, { "header": "10", "field": "2024_10" }, { "header": "11", "field": "2024_11" }, { "header": "12", "field": "2024_12" }, { "header": "01", "field": "2025_01" }, { "header": "02", "field": "2025_02" }, { "header": "03", "field": "2025_03" }, { "header": "04", "field": "2025_04" }, { "header": "05", "field": "2025_05" }, { "header": "06", "field": "2025_06" }, { "header": "07", "field": "2025_07" }, { "header": "08", "field": "2025_08" }, { "header": "09", "field": "2025_09" }, { "header": "10", "field": "2025_10" }, { "header": "11", "field": "2025_11" }, { "header": "12", "field": "2025_12" }, { "header": "01", "field": "2026_01" }, { "header": "02", "field": "2026_02" }, { "header": "03", "field": "2026_03" }]
Hi.Below is a video of me reproducing the error on my project. Can you watch it and help me fix it?drive.google.com/.../1I_LA1NZCD1NiQAnOdE7BJKffV2p_8Hwq
I have prepared a sample with the provided code, however, on my side the page of the grid and the position of the scrollbar persists when navigating between the tabs.
Please test the provided sample on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own isolated sample.