FlexGrid Binding Template Variables to a TextArea

FlexGrid Binding Template Variables to a TextArea

Posted by: david-kermott on 14 September 2017, 11:46 am EST

• 

  david-kermott

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:46 am EST

  I would like to use a multi-line textarea within a flexgrid CellEdit template.

  Can I bind to any template variables? or do I have to do some awkward javascript to accomplish this?

  Here’s a fiddle I’ve been tinkering with to try and test this scenario: http://jsfiddle.net/jjorusw6/4/

  I also had some issues with all rows resizing and word-wrap on the Cell template isn’t working either.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:46 am EST

  Hi,
  
  Here are the solutions for all the issues, which were mentioned in the fiddle.
  
  Issue 1) you can enable word wrap for a column using Column’s wordWrap property.
  
  Issue 2) You can resize rows using FlexGrid’s autoSizeRows method in the initialized event.
  
  Issue 3) You can bind textarea to template variables $value to ngModel property.
  
  For reference, please see the updated fiddle that implements the same.
  
  Hope it helps.

  Thanks,
  
  Manish Kumar Gupta

• 

  webworx

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:46 am EST

  Hi, i have an issue with the new angular2 version and custom cell editing.
  
  The value of the textarea is lost after the end of editing the cell.

  This is my grid code:

  <wj-flex-grid #mainGrid
  
  [itemsSource]=“data”
  
  class=“grid”
  
  [style.height]=“gridHeight + ‘px’”
  
  [allowResizing]=“‘Both’”
  
  [allowAddNew]=“true”
  
  [allowDelete]=“true”
  
  (initialized)=“initialized(grid)”
  
  (cellEditEnded)=“cellEditEnded(grid, $event)”
  
  (resizedColumn)=“resizedColumn(grid, $event)”
  
  (sortedColumn)=“sortedColumn(grid, $event)”
  
  (updatedLayout)=“updatedLayout(grid)”
  
  >

  <!-- row numbers-->
  <template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell">
      {{cell.row.index}}
  </template>
  
  <!-- top left corner element-->
  <template wjFlexGridCellTemplate [cellType]="'TopLeft'">
      <span class="">#</span>
  </template>
  
  <wj-flex-grid-column [header]="'Id'" [binding]="'id'" [wordWrap]="true"></wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Finding DE'" [binding]="'finding_de'" [wordWrap]="true" [width]="'*'"></wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Finding EN'" [binding]="'finding_en'" [wordWrap]="true" [width]="'*'"></wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Beschreibung DE'" [binding]="'description_de'"  [wordWrap]="true" [width]="'*'" [isContentHtml]="true"></wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Beschreibung EN'" [binding]="'description_en'" [wordWrap]="true" [width]="'*'" [isContentHtml]="true">
      <!-- custom cell edit with textarea -->
      <template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell">
          <div class="tadiv">
            <textarea [(value)]="cell.value"></textarea>
          </div>
      </template>
  </wj-flex-grid-column>
  

  </wj-flex-grid>

  Best regards, Asmo

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:46 am EST

  Hello Asmo,
  
  HTML TextArea control’s value control does not allow two way binding. So please use ngModel instead of value attribute.

  For your reference, please use the following code snippet:

  <wj-flex-grid  [itemsSource]="data" >
      <template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell">
          {{cell.row.index}}
      </template>
      <template wjFlexGridCellTemplate [cellType]="'TopLeft'">
          <span>#</span>
      </template>
      <wj-flex-grid-column [header]="'Description'" [binding]="'description'">
          <template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell">
              <div>
                  <textarea [(value)]="cell.value"></textarea>
              </div>
          </template>
      </wj-flex-grid-column>
  </wj-flex-grid>

  It should work

  Thanks,
  
  Manish Kumar Gupta

• 

  madhansmart26

  • Post Options:
  • Link
    Copy

  Posted 4 July 2018, 7:39 am EST

  sdrttetet