Question

我一直在我的角度（v.6.0.8）项目中使用Syncfusion网格。在其中一个页面中，用户可以通过复选框将月份标记为已完成。

这会导致模型中的某些状态更改。因此，在后端调用完成后，我使用“拼接”更新了模型。为了反映网格上的更改，我必须调用this.deliveryItemsGrid.refresh（）;。但是，这会导致丢失用户正在处理的位置（网格滚动到顶部）。

有没有一种方法可以用来刷新网格而不更改滚动条的位置？

[HTML]

            <!-- JAN -->
            <e-column headerText="JAN" [customAttributes]="{class: 'textAlignment'}">
              <ng-template #template let-data>
                  <div> <i class="fa fa-wrench fa-2x" [style.color]="getMonthColorRM(data, 0)"></i></div>
                  <div *ngIf="!isReadOnlyUser" class="custom-control custom-checkbox">
                    <input id="chkChangeStatusRM{{data.rmDetailId + 'JAN'}}" type="checkbox" class="custom-control-input"
                           [checked]="getMonthCompletionStatus(data, 0)" (change)="saveStatusRM(data,'0')" aria-label="Complete Task" />
                    <label *ngIf="getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRM{{data.rmDetailId + 'JAN'}}" data-toggle="tooltip" data-placement="top" title="Mark as not complete"></label>
                    <label *ngIf="!getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRM{{data.rmDetailId + 'JAN'}}" data-toggle="tooltip" data-placement="top" title="Mark as complete"></label>
                  </div>
                <div *ngIf="data.type != 'RM' && ((data?.plannedDate?.getMonth()) == 0)"> <i id="{{'JAN'+ data.type + data.id}}" class="fa fa-wrench fa-2x" [style.color]="getMonthColorCM(data)"></i></div>
              </ng-template>
            </e-column>

[ts文件]

private saveStatusRM(row: DeliveryPlanModel, monthId) {
    if (row && row.rmYears) {
      let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
      selectedRmYear.schoolNumber = this.schoolNumber;
      selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed = !selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed;
      selectedRmYear.completed = selectedRmYear.completedMonthsList.every(m => m.completed);

      if (selectedRmYear.completed)
        row.statusDisplay = "Completed";
      else {
        if (selectedRmYear.completedMonthsList.some(m => m.completed))
          row.statusDisplay = "In progress";
        else
          row.statusDisplay = "Planned";
      }

      // Set the color of the spanners (This is only for front-end use)
      selectedRmYear.completedMonthsList.forEach(x => {
        let color: string = "";
        if (x.completed) {
          color = "green";
        }
        else {
          let dueOn: Date = new Date(+selectedRmYear.year, +x.month + 1, 1);
          let currentDate: Date = new Date();
          color = currentDate < dueOn ? "black" : "red";
        }
        x.color = color;
      })
      // Update the record on the Database.
      this.deliveryPlanService.updateStatusRM(selectedRmYear).subscribe(
        data => {
          if (data) {
            // Replace the updated record in 'gridRows'
            var selectedRow = this.gridRows.filter(x => x.rmDetailId == row.rmDetailId)[0]
            var selectedRecordIndex = this.gridRows.indexOf(selectedRow);
            this.gridRows.splice(selectedRecordIndex, 1, row);
            this.calculateRmProgress(this.gridRows);
            //this.deliveryItemsGrid.refresh();
          }
        });
    }
  }


private getMonthCompletionStatus(row: DeliveryPlanModel, monthId): boolean {
      if (row && row.rmYears) {
        let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
        if (selectedRmYear && selectedRmYear.completedMonthsList) {
          var month = selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0];
          return month ? month.completed : null;
        }
        else {
          return null;
        }
      }    
  }

Answer 1

我们已经分析了您的查询，建议在使用actionComplete事件完成刷新操作之后，在刷新方法调用之前获取scrollTop值并将其绑定到网格滚动条。请参考下面的示例和文档以供参考，

complete(args){
  if(args.requestType == 'refresh' && this.scrollVal){
    this.grid.getContent().firstElementChild.scrollTop = this.scrollVal;
    this.scrollVal = 0;
  }
}
refresh(){
  this.scrollVal = this.grid.getContent().firstElementChild.scrollTop;
  this.grid.refresh();
}

示例：https://stackblitz.com/edit/angular-gg4hgd-hrxcwr?file=default.component.ts

文档：https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete

请再次与我们联系以获得进一步的帮助。

关于， Thavasian和S。

Answer 2

我能够找到解决该问题的方法。我使用function loo(x) { if (x >= 10) { return; loo(x+1) } } loo(1);和"rowDataBound"事件来实现这一点。请参考下面的代码。

[HTML]

"dataBound"

[ts]

我创建了两个全局变量来存储选定的索引。

<ejs-grid #deliveryItemsGrid id="deliveryItemsGrid"
                      [dataSource]="gridRows"
                      [gridLines]="componentVariables.gridLines"
                      [allowPaging]="componentVariables.allowPaging"
                      [allowGrouping]="componentVariables.allowGrouping"
                      [allowSorting]="componentVariables.allowSorting"
                      [allowSelection]="componentVariables.allowSelection"
                      [allowTextWrap]="componentVariables.allowTextWrap"
                      [allowFiltering]="componentVariables.allowFiltering"
                      [pageSettings]="componentVariables.pageSettings"
                      [filterSettings]="componentVariables.filterOptions"
                      [selectedRowIndex]="selectedRowIndex"
                      [selectionSettings]="selectionOptions"
                      [toolbar]="componentVariables.toolbarOptions"
                      (toolbarClick)="toolbarClick($event)"
                      (rowDataBound)="rowDataBound($event)"
                      (dataBound)="dataBound($event)">

然后，在所有更新功能中，在调用selectedIndexes: number[] = []; justNowUpdatedId = 0;方法之前，我将相关ID保留在refresh()变量中。

最后，我实现了'justNowUpdatedId'和"rowDataBound"事件，以保留用户以前工作的位置。

"dataBound"

刷新Syncfusion网格后如何聚焦更新的记录

2 个答案: