Data in columns is displayed incorrectly when switching tabs, scrolling, and switching to another page

Ngoc Vu Xuan posted 2 months ago

<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 right
go to page 2
click on tab 2 or 3
scroll to the right
click on page 2 on tab 3
go back to tab 1

Top Replies

1320

Offline Monika Kirkova posted 2 months ago +1 verified
Hello, 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...view reply »

Parents

No Data

Reply

1320

Verified Answer
Offline Monika Kirkova posted 2 months ago

Hello,

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.

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
Cancel
Reply

Reject Answer

Cancel

Children

Offline Ngoc Vu Xuan posted 2 months ago in reply to Monika Kirkova

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"
 }
]

15

Offline Ngoc Vu Xuan posted 2 months ago in reply to Monika Kirkova

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
Cancel
Reply

Cancel