Delete row via 'delete' button?

Delete row via 'delete' button?

Posted by: kyle.m.vassella on 19 November 2018, 1:44 pm EST

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 November 2018, 1:44 pm EST

  In Angular 6, we’re trying to add a ‘delete’ button to each row which, on click, deletes that row. We would also like to disable the use of the ‘delete’ key – to encourage use of these delete buttons, if possible.

  Given my template below - could you provide me with some typescript which shows how to accomplish this?

  
   <wj-flex-grid #m_grid [keyActionTab]="'CycleOut'" [allowAddNew]="true" [itemsSource]="m_collectionView" (initialized)="initGrid(sender, event)"
          <wj-flex-grid-column [header]="'userName'" [binding]="'userName'" [width]="175" [visible]="true"></wj-flex-grid-column>
  
          <wj-flex-grid-column [header]="'firstName'" [binding]="'firstName'" [width]="175" [visible]="true"></wj-flex-grid-column>
  
  <!-- my custom column: -->
          <wj-flex-grid-column [header]="'delete'" [width]="130" [visible]="true" format="string">
  	<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
                  <button class="btn-primary" id="user-delete" (click)="deleteRow()">Delete</button>
              </ng-template>
  	</wj-flex-grid-column>
  
  </wj-flex-grid>
  
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 20 November 2018, 12:14 am EST

  You may use remove() method of grid’s collectionView to remove rows from the grid. To disable delete using del key, you may set the allowDelete property to false.
  
  Please refer to the following code snippet and sample:

  <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 (click)="delRow(grid, row)">Delete Row</button>
      </ng-template>
    </wj-flex-grid-column>
  </wj-flex-grid>
  
  // equivalent del row method
  delRow(grid, row){
      grid.collectionView.remove(row.dataItem);
    }
  

  https://stackblitz.com/edit/angular-3bwyx3?file=src%2Fapp%2Fapp.component.ts

  ~Sharad

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy

  Posted 20 November 2018, 9:02 pm EST

  Thanks Sharad,

  That worked! However, I’m having trouble understanding the purpose of [allowDelete]. In my testing, it doesn’t make a difference whether I set [allowDelete] to ‘false’ or ‘true’.

  The documentation says that if [allowDelete]=“false” and [isReadonly]=“true”, then you won’t be able to use the delete key to delete. But in my tests, even if I set [allowDelete]=“true”, I still can’t delete with [isReadOnly]=“true” - whether [isReadOnly] is set on the whole grid or just a column. So it appears that the [allowDelete] attribute is not even needed. It all depends on the [isReadOnly] setting, and [allowDelete] isn’t doing anything either way.

  Likewise, If I set [isReadOnly]=‘false’, then [allowDelete] also has no effect whether it is false or true - rows/columns can still be deleted with the delete key.

  Knowing this - what’s the purpose of the [allowDelete] attribute? It seems like I can only make a column un-deletable via delete key if it is set to [isReadOnly]=‘true’ (doesnt matter if I set allowDelete to true or false)- but what if I want to disallow the delete key on columns or grids with [isReadOnly]=‘false’?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 21 November 2018, 2:08 am EST

  allowDelete works only when the whole row is selected and none of the columns or grid is read-only.
  
  If grid or any of the columns is readOnly
  
  Please refer to the following sample for a better understanding:
  
  https://stackblitz.com/edit/angular-malzht?file=src%2Fapp%2Fapp.component.html

  Please let us know if you still have any confusion.

  ~Sharad

• 

  pritam1995kumar

  • Post Options:
  • Link
    Copy

  Posted 31 January 2019, 5:48 am EST

  Hi Sarad,

  In the below link u shared in the previous comment can you demonstrate how we can delete the cell data using delete key if the cell is readonly. In the below example it’s deleting the whole row. But our requirement is delete a pertcular cell.

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

  thanks in advance ,
  
  ~ pritam

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 1 February 2019, 1:18 am EST

  Hi Pritam,

  To delete content of read-only cell, we may simply handle keydown event and set cell data to null if delete key is pressed.
  
  Please refer to the following code snippet:

  <!-- in template -->
  <wj-flex-grid #grid [itemsSource]="data" (initialized)="init(grid)" [allowDelete]="false" (keydown.delete)="del(grid, $event)">
    <wj-flex-grid-column [binding]="'id'">
    </wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'country'" [isReadOnly]="true">
    </wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'amount'">
    </wj-flex-grid-column> 
  </wj-flex-grid>
  
  //equivalent del method
  del(grid, e){
      // if editing, then don't do anything
      if(grid.editRange){
        return;
      }
      let sel = grid.selection;
      if(!sel.isSingleCell){
        // delete cell content only if single cell is selected (optional, can also iterate all cells in sel range and delete its content)
        return;
      }
  
      // set cell data to null a.k.a del cell
      grid.setCellData(sel.row, sel.col, null, false);
  
    }
  

  You may also refer to the following updated sample: https://stackblitz.com/edit/angular-9rzbzp?file=src%2Fapp%2Fapp.component.ts