Flexgrid Angular - Trying to add a Delete Column but it is not working?

Flexgrid Angular - Trying to add a Delete Column but it is not working?

Posted by: andrewalisa on 4 May 2021, 2:53 am EST

• 

  andrewalisa

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 May 2021, 2:53 am EST

  Hello, I am using Flexgrid on Angular 10.

  All I need to do is add a “Delete Row” Column where if somebody clicks on the trash can icon, it calls the backend and it deletes the row from the database.

  Essentially I need something where every row contains a column (A delete column) where if you click on the Trash Can icon for that row, then that particular row would be deleted from the database.

  I tried to add this to my the .html part of Angular, but it does not render this propertly

                  <wj-flex-grid-column class="deleteColumn" [header]="'Delete'" [isReadOnly]="true" format="n2" [binding]="'delete'" onload="a = 1">
                    sdsadsadas
                  </wj-flex-grid-column>
  

  I have similar code for using the angular material tables:

                  <!-- Delete Column -->
                  <ng-container matColumnDef="delete">
                    <mat-header-cell *matHeaderCellDef></mat-header-cell>
                    <mat-cell *matCellDef="let element">
                      <button
                        mat-icon-button
                        color="primary"
                        (click)="onDeleteService($event, element)"
                        [disabled]="isDeleteInProcess"
                      >
                        <mat-icon *ngIf="serviceUnderDeletion !== element">delete</mat-icon>
                        <mat-spinner aria-label="loading" *ngIf="serviceUnderDeletion === element" diameter="24"></mat-spinner>
                      </button>
                    </mat-cell>
                  </ng-container>
  

• 

  andrewalisa

  • Post Options:
  • Link
    Copy

  Posted 4 May 2021, 2:56 am EST

  Let me mention that me adding “sdsadsadas” to wj-flex-grid-column was just to show that nothing renders within that Wijmo Flexgrid column. I originally tried to add a delete button there, but that did not render either.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 4 May 2021, 7:18 pm EST

  Hi,

  In the above code, you are trying to render a button or “sdsadsadas” directly inside the column that’s why they are not rendering. You need to use cell templates ( tag) to define custom content for FlexGrid cells.

  You may refer to the demo: https://www.grapecity.com/wijmo/demos/Grid/CustomCells/CellTemplates/Overview/angular

  You may use the click event of the delete button to call the delRow() method to remove rows from the database. To disable delete using the del key, you may set the allowDelete property to false.
  
  Please refer to the following code snippet:

  <wj-flex-grid #grid [itemsSource]="data" (initialized)="init(grid)" [allowDelete]="false">
     ......
    <wj-flex-grid-column [header]="'Delete Row'" align="center" [width]="120" [isReadOnly]="true">
      <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-row="row">
        <button id="deleteButton" class="wj-btn" (click)="delRow(grid, row)"><i class="fa fa-trash"></i></button>
      </ng-template>
    </wj-flex-grid-column>
  </wj-flex-grid>
  

  You may also refer to the sample demonstrating the same:

  https://stackblitz.com/edit/angular-yj1jbu?file=src%2Fapp%2Fapp.component.html

  Regards,
  
  Ashwin