Kendo UI MultiSelect dropdown filter with Kendo Grid Angular - Total count not updating after page refresh

Question

I am facing an issue with the Kendo UI MultiSelect dropdown filter in a Kendo Grid Angular component. The issue is that the total count of records in the grid is not updating correctly after page refresh.

When the application first loads, the grid and multi-select dropdown are initialized with data from an API. The user can then check and uncheck items in the dropdown to filter the grid. The state of the selected items is saved, so that the grid remains filtered when the user switches pages.

However, after the user switches pages and returns to the page where the grid was loaded, the total count of records in the grid is not updated correctly. The total count is still equal to the number of records in the original data set, even though the grid is filtered.

I have tried a number of different approaches to resolve this issue, including:

1. Using the ngAfterChange() lifecycle hook
2. Initializing a flag (boolean condition) to track whether the grid has been initialized
3. Using the Angular Router to detect when the user is navigating to the page where the grid is located

However, none of these approaches have worked. If someone can guide me, I am struck. And if there is better approach then mine please let me know as well.

// Loading data from API (category is focused now)
loadTasksData(): void {
    this.taskService.getTaskFilter().subscribe((response: any) => {
      if (response && response.userSetting) {
        const userSetting = JSON.parse(response.userSetting);
        this.selectedCategoriesAPI = userSetting.kategorie;
        this.selectedStatusAPI = userSetting.status;
        this.selectedPriorityAPI = userSetting.prioritaet;
        this.selectedUserAPI = userSetting.user;
      }
    });
  }


// Define a method to apply combined filters to the grid data
  applyCombinedFilters() {
    // Create a copy of the original grid data if it's not already available
    if (this.originalData.length === 0) {
      this.originalData = [...this.gridData];
    }

    // Apply filtering based on selected categories, statuses, and priorities
    const filteredData = this.originalData.filter((item) => {
      const categoryMatch =
        this.selectedCategoriesAPI.length === 0 ||
        this.selectedCategoriesAPI.includes(item["aufgabenart"]["name"]);
      const statusMatch =
        this.selectedStatus.length === 0 ||
        this.selectedStatus.includes(item["aufgabenstatus"]);
      const priorityMatch =
        this.selectedPriority.length === 0 ||
        this.selectedPriority.includes(
          this.filter.prioritaet[item["prioritaet"]].text
        );

      // Combine both category, status, and priority filters using logical AND
      return categoryMatch && statusMatch && priorityMatch;
    });

    // Update the grid data with the filtered data
    this.gridData = filteredData;
    this.gridView = this.gridData;

    this.saveTaskFilterToDb();
  }

ngOnInit(): void {
    this.getTasks();

    // Loading all the categories
    this.availableCategories = this.categories.categorie.map(
      (category) => category.text
    );
    this.availableStatus = this.selectedStatus = [...this.checked["status"]];
  }

public getTasks() {
    this.taskSubscription = this.taskService.getTasks().subscribe((tasks) => {
      this.tasks = tasks;

      this.dataSource.data = this.tasks;
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;

      // Loading grid data and at timeout of 3 second to load data properly
      this.gridView = this.tasks;
        this.gridData = this.gridView;
        this.loadTasksData();
        this.isLoading = false;
    });
  }

<kendo-multiselect
[placeholder]="'Kategorie'"
[checkboxes]="true"
[autoClose]="false"
[data]="availableCategories"
[(ngModel)]="selectedCategoriesAPI"
[tagMapper]="tagMapper"
(ngModelChange)="applyCombinedFilters()"
></kendo-multiselect>