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

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

  • 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>
  • Replied 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.
  • Marked as Answer

    Replied 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 (<ng-template></ng-template> 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels