KendoGrid removing an item

[Andreea]

I use a kendo-grid component that has a dynamic list,. When I press Add it adds a new row and each row can be removed from the list. My problem is when I remove an item, it always removes the last row from UI. I saw that the values are correct, only the UI is the problem because it removes the last element from the list and it keeps visible the one I selected to remove.

After some debugging, I saw that it is because of the filteredPermission list that updates at every changes but I do not know how to fix th problem.

Thank you!

  <kendo-grid [data]="rowsPermissionsArray.controls">

        <kendo-grid-column field="id" title="{{ resourceCodes.permissions | translate }}">

          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">

            <kendo-formfield>

              <app-crm-single-dropdown

                class="dl-with-remove-btn"

                [data]="filteredPermissions"

                [formControl]="dataItem.get('id')"></app-crm-single-dropdown>

            </kendo-formfield>

            <ng-container

              *ngFor="let error of form.get('rowsPermissions')?.get(rowIndex.toString())?.get('id')?.errors | keyvalue">

              <kendo-formerror

                *ngIf="

                  error.key === 'required' || error.key === 'duplicatePermission'

                    ? form.get('rowsPermissions')?.get(rowIndex.toString())?.get('id')?.touched

                    : true

                "

                >{{ error.value }}</kendo-formerror

              >

            </ng-container>

          </ng-template>

        </kendo-grid-column>

        <kendo-grid-column [width]="130" title="{{ resourceCodes.actions | translate }}" class="column-action-buttons">

          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">

            <button class="button-grid-action" (click)="showDeleteConfirmationPermissionModal(rowIndex)">

              <icon-delete class="icon"></icon-delete>

            </button>

          </ng-template>

       

</kendo-grid-column>

 get rowsPermissionsArray() {

    return this.form.get('rowsPermissions') as FormArray;

  }

 

  confirmPermissionDeletion = (): void => {

    this.rowsPermissionsArray.removeAt(this.selectedPermissionId);

    this.showConfirmationPermissionModal = false;

  };

  showDeleteConfirmationPermissionModal(id: number) {

    this.selectedPermissionId = id;

    this.showConfirmationPermissionModal = true;

  }

  onCloseConfirmationPermissionModal(): void {

    this.showConfirmationPermissionModal = false;

  }

 

  setupPermissions() {

    this.form.get('rowsPermissions')?.valueChanges.subscribe((selectedValues: any[]) => {

      this.filteredPermissions = this.platformPermissions.filter(

        permission => !selectedValues.some(selected => selected.id === permission.id)

      );

    });

  }

</kendo-grid>