Flexsheet: Making one cell as text area

Posted by: sasmita.swain2014 on 4 November 2018, 10:52 pm EST

    • Post Options:
    • Link

    Posted 4 November 2018, 10:52 pm 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

  • Posted 5 November 2018, 6:06 pm 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

  • Posted 8 November 2018, 10:47 pm 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

  • Posted 11 November 2018, 4:23 pm 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

  • Posted 13 November 2018, 4:32 pm 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

  • Posted 14 November 2018, 3:28 pm 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

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels