I have been using a Syncfusion grid in my angular (v.6.0.8) project. In one of the pages, users can mark months as completed by checkboxes.
It causes to some of the status changes in the model. Hence, I update the model using "splice", after the backend call is completed. In order to reflect the changes on the grid, I have to call this.deliveryItemsGrid.refresh(); but, this cause to lose the position where the user is working on (grid scrolls up to the top).
Is there a way that I could use to refresh the grid without changing the scroll bar position?
[HTML]
<!-- JAN -->
[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;
}
}
}
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
