Flexsheet: Making one cell as text area

Flexsheet: Making one cell as text area

Posted by: sasmita.swain2014 on 5 November 2018, 7:52 am EST

• 

  sasmita.swain2014

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 November 2018, 7:52 am EST

  Hi,

  We are using Flexsheet with Angular 4.

  Can anyone please suggest the best solution to put a Text area in a particular cell?

  currently we are doing as below, but it is not working as expected and giving some issues.
  
  cell.innerHTML = ‘’ + flex.rows[r].dataItem[col.binding] + ‘’;

  Thanks,
  
  Sasmita

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 6 November 2018, 3:06 am EST

  Hi,

  If we understand correctly you would like to show some multiline content and wants to let the user edit multiline content.
  
  In this case using ‘multiline’ property of row/column would be the best possible solution.
  
  If the multiline property is set to true, flexsheet would add a textarea like editor for row/column.
  
  Please refer to the following sample: https://stackblitz.com/edit/angular-cm3xug?file=app%2Fapp.component.ts

  ~Sharad

• 

  sasmita.swain2014

  • Post Options:
  • Link
    Copy

  Posted 9 November 2018, 7:47 am EST

  Hi Sharad,

  In the above demo can we set overflow property? so if the texts exceed the height, then a scroll bar should come.

  Thanks,
  
  Sasmita

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 November 2018, 1:23 am EST

  Yes, we may use formatItem event to add scrollbars if required.
  
  Please refer to the following updated sample:
  
  https://stackblitz.com/edit/angular-hnpysm?file=app%2Fapp.component.html

  ~Sharad

• 

  sasmita.swain2014

  • Post Options:
  • Link
    Copy

  Posted 14 November 2018, 1:32 am EST

  Hi,

  How will i give only overflow-y and overflow-x:hidden? if i am giving overflow-y, it is giving syntax error.

  Thanks,
  
  Sasmita

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 15 November 2018, 12:28 am EST

  For overflow-y you need to set overflowY property instead of ‘overflow-y’, similarly, use ‘overflowX’ for setting overflow-x.
  
  Please refer to following code snippet and sample:
  
  https://stackblitz.com/edit/angular-279v9x?file=app%2Fapp.component.ts

  // set overflow
      flexSheet.formatItem.addHandler((s,e)=>{
        if(e.panel != s.cells){
          return;
        }
        
        // if textarea cell is editing, set overflow to editor cell
        if(s.editRange && s.editRange.containsRow(2) && s.editRange.containsColumn(2)){
            e.cell.style.overflow = null;
            s.activeEditor.style.overflowY = 'auto';
            return;
        }
  
        // set overflow to normal cell 
        if(e.row == 2 && e.col == 2){
          e.cell.style.overflowY = 'auto';
          e.cell.style.overflowX = 'hidden';
        }
  
      });
  

  ~Sharad