Editable Tree FlexGrid with selective Template

Editable Tree FlexGrid with selective Template

Posted by: kun.leeing on 27 May 2020, 12:41 am EST

• 

  kun.leeing

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 May 2020, 12:41 am EST

  Hi Team,

  I was trying to build up a Tree flexgrid which needs to be editable at specific column but for different type its input should be customized. for instance,
  
  <wj-flex-grid #flex
  
  [itemsSource]=“[data]”
  
  [headersVisibility]=“‘Column’”
  
  [selectionMode]=“‘Row’”
  
  allowDragging=“None”
  
  [allowSorting]=“false”
  
  [childItemsPath]=“‘children’”
  
  [isReadOnly]=“false”
  
  (itemsSourceChanged)=“onSourceChanged(flex)”
  
  [itemFormatter]=“itemFormatter”
  
  (loadedRows)=“onLoadedRows(flex,$event)”
  
  (beginningEdit)=“onBeginningEdit(flex, $event)”>
  
  <wj-flex-grid-column [binding]=“‘value’” [header]=“‘Value’” [isReadOnly]=“false” [dataType]=“‘Number’” [format]=“‘n3’”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘CellEdit’” let-item=“item”>
  
  <wj-input-number *ngIf=“item.isPrimitiveType”
  
  [format]=“‘n3’” [(value)]=“item.value” required >
  
  <customer-selector *ngIf=“!item.isPrimitiveType”
  
  [selectedId]=“item.id”>
  
  
  
  
  
  
  
  But it looks like when editable works, the ng-template stop working.
  
  How can I make it like the effect that when isPrimitiveType, it uses the edit of the cell, when !isPrimitiveType, it invokes the customer-selector component?

  Thanks in advance.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 May 2020, 6:44 pm EST

  Hi Kun,

  The tree grid is not editable by default. You will need to set the isReadOnly of the FlexGrid to false and in the loadedRows event, iterate over each row and set their isReadOnly to false.
  
  Also, if you are using CellEdit template, then I would suggest you use the cell.value variable for binding. Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-wsrfbn

  Regards,
  
  Ashwin

• 

  kun.leeing

  • Post Options:
  • Link
    Copy

  Posted 27 May 2020, 7:15 pm EST

  Hey Ashwin,

  Thanks so much for this brilliant example. If I may ask more, can I put on different input box based on different types? For example, I may need Text input, decimal input, checkbox and sub-tree or self components.

  I am doing now is

  <wj-flex-grid-column [binding]=“‘value’” [header]=“‘Value’” [isReadOnly]=“false”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-item=“item”>
  
  <wj-input-number *ngIf=“item.isDecimalType”
  
  [(value)]=“item.value” [isRequired]=“false” [placeholder]=“‘Please enter a number …’”>
  
  <wj-input-mask *ngIf=“item…isTextType”
  
  [(value)]=“item.value” [isRequired]=“false”
  
  [placeholder]=“‘Please enter text …’”>
  
  
  
  <input *ngIf=“item.instanceNode.isBoolType” type=“checkbox” />
  
  <component-selector ngIf=“item.isSelfType”>
  
  
  
  
  
  
  
  I think I should not use wj-input-mask for text input and the bare input checkbox? We might have all the wj-input- controls for that requirement?

  Best Regards,
  
  Kun

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 May 2020, 4:52 pm EST

  Hi Kun,

  You can use different input controls for different type of editing. For drop-downs, you can use ComboBox or AutoComplete, for numbers you can use InputNumber and so on.
  
  You can use InputMask control for simple text boxes without using the mask property. You can even use ComboBox for simple text input. Just do not add any itemsSource and bound the value to the text property of the ComboBox.
  
  For checkboxes, we do not have any control so you can use the default HTML checkbox.
  
  Also, make sure that you bound the values using cell.value variable as in the sample that I provided.

  I hope this clears your doubts.

  ~regardsz