wjFlexGridCellTemplate RowHeader(Edit) in "allowAddNew row"

wjFlexGridCellTemplate RowHeader(Edit) in "allowAddNew row"

Posted by: steidle on 18 December 2021, 7:07 am EST

• 

  steidle

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 18 December 2021, 7:07 am EST

  In Angular I have a ```
  
  

  <ng-template cellType=RowHeader wjFlexGridCellTemplate let-row="row">
    <div *ngIf="row.dataItem">{{row.index}}</div>
    <div *ngIf="!row.dataItem" style="font-size:70%; line-height:1em">
      ADD<br>NEW 
    </div> 
  </ng-template>
  <ng-template cellType=RowHeaderEdit wjFlexGridCellTemplate let-row="row">
    <div style="text-align:center;">&#x270e;</div>
  </ng-template>
  

  
  This all worked according to 
  https://www.grapecity.com/wijmo/api/classes/wijmo_angular2_grid.wjflexgridcelltemplate.html 
  
  This nicely displayed the row index or "ADD NEW" in normal mode and the pen in rows being edited. 
  However, since recently it [b]constantly displays the pen in the "new row" even without editing[/b]. It might be me but I also have a hunch that this might have changed with the update from Wijmo 5.20203.748 to 5.20213.824 (and ng10 to ng13).
  
  PS: I am afraid I have no sample on stackblitz as running the latest @grapecity/wijmo.angular2.all there fails (and has been ding so for  while :-/ ).
  
  Thanks for your assistance!!

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 21 December 2021, 6:33 am EST

  Hello,

  The issue seems like a bug, we have reported the issue to our Dev team for further investigation of the issue with an internal tracking ID WJM-22133. We will provide you an update on this as soon as we get any response.

  Thank you for your patience.

  Regards

• 

  steidle

  • Post Options:
  • Link
    Copy

  Posted 24 December 2021, 4:26 am EST

  I created a formatItem handler as a workaround and I accidentally had similar symptoms, i.e. the edit symbol constantly displayed in the “new row”.

  this.grid.formatItem.addHandler((g:wjg.FlexGrid,ev:wjg.FormatItemEventArgs)=>{
        if(ev.panel==g.rowHeaders && ev.getRow().dataItem==g.editableCollectionView.currentEditItem) {
          ev.cell.innerHTML = '<div style="font-size:140%; line-height:1em; text-align:center;">&#x270e;</div> ';
        }
      })
  

  For the new row obivously dataItem and currentEditItem are both null and thus equal. So the if condition is missing a ev.getRow().dataItem!=null.
  
  I consider this only a workaround. Please notify me when the bug is fixed.

  1. Speaking of cell templates in purejs: How would you go about if you where to attach an event handler to the pen symbol? In an Angular template this is easy with an attribute like (click)=“myFuncInComponent($event)”. It’s maybe a trivial question, but how would I wire something like this up inside a formatItem handler like above to call a method in the same Angular component?

  2. I manage to create an Wijmo project on stackblitz for purejs for the latest version, but not with support for Angular templates (). Would you mind creating a this for me to fork. Your colleague Ashwin once also did this for me for an earlier version. Seems to take a trick to get this to compile.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 27 December 2021, 5:21 am EST

  Hello,

  Sure, we will provide you an update as soon as we get any response from the Dev team on this.

  1. You may add a class to the edit glyphicon element and add a click event to the class element inside the formatItem as demonstrated in the below sample link:

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

  However, we would recommend you to add an event listener to the grid’s hostElement and handle the event for the specific class. You can refer to this in the sample link above.

  2. You can refer to the sample link above for the same.

  Regards

• 

  steidle

  • Post Options:
  • Link
    Copy

  Posted 31 December 2021, 1:42 pm EST

  Thanks for the sample with the latest Angular interop components on stackblitz.

  I did not consider that it’s possible to attach a JS event handler AFTER assigning cell content to cell.innerHTML.
  
  Your note on attaching events to the grid root and then use event delegation is well noted. Less handlers make rendering more efficient.