Я использую сетку Syncfusion в своем проекте angular (v.6.0.8).На одной из страниц пользователи могут отмечать месяцы как завершенные с помощью флажков.
Это приводит к некоторым изменениям статуса в модели.Следовательно, я обновляю модель, используя «соединение», после завершения внутреннего вызова.Чтобы отразить изменения в сетке, я должен вызвать 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 file]
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;
}
}
}
