FlexGrid multiline word wrapping

FlexGrid multiline word wrapping

Posted by: nsd on 14 September 2017, 2:17 am EST

• 

  nsd

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 2:17 am EST

  Is it possible to have a multiline input field in a FlexGrid?

  I found this old post http://wijmo.com/topic/wijmo-grid-word-wrap-text-in-cell/ detailing how you create a multiline input using Wijmo3, however we would like to do it with the FlexGrid from Wijmo5.

  Are there any instructions available for FlexGrid 5?

• 

  ashishjindal

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:17 am EST

  Hello,

  You can refer to the following thread discussing same issue:
  
  http://wijmo.com/topic/grid-cell-text-wrapping/

  Let me know if it does not help.

  Regards

• 

  nsd

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:17 am EST

  Hi Ashish

  If you look at this sample, where I attempt to use Column.wordWrap and autoSizeRows.

  You will see that the text is wordWrapped, but thats not what I want.
  
  I want the newline characters in between words to matter.

  The result in the cells should have been:

  “This
  
  Is
  
  Multi
  
  Lines”

  http://jsfiddle.net/y4gsjpmp/17/

• 

  ashishjindal

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:17 am EST

  Hello NSD,

  Thanks for the explanation. I understood your requirement and you can achieve the same by replacing ‘\n’ with br tags using itemFormatter. Note, you need to set the ‘isContentHtml’ property of the column as true.

  Here is the updated fiddle: http://jsfiddle.net/y4gsjpmp/19/

  Regards

• 

  nsd

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:17 am EST

  Hi Ashish

  Thanks for the updated fiddle.

  Something strange is going on, with this fiddle, you can double click to edit any of the cells anymore, and your not able to write more then one character in any of the fields?
  
  If I disable the itemFormatter the editing returns to normal.

  Is that the expected behavior for itemFormatter?

• 

  ashishjindal

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:17 am EST

  Hello NSD,

  Actually, it happened because beginUpdate/EndUpdate methods were called in the itemFormatter. Once you remove/comment them, it works correctly. Here is the updated fiddle: http://jsfiddle.net/y4gsjpmp/22/

  Regards

• 

  nsd

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:17 am EST

  Hi Ashish

  I almost have it working now.

  The only major issue I have now is resizing the height of the rows, so they fit to the content, is that something you could help me with?

  https://jsfiddle.net/y4gsjpmp/28/

• 

  ashishjindal

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:17 am EST

  Hello NSD,

  Somehow, you reply was marked as spam so I could not reply it.

  Can you check the following fiddle and let me know if it does not fulfill your requirement : http://jsfiddle.net/y4gsjpmp/30/

  Regards

• 

  ashishjindal

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:17 am EST

  Hello NSD,

  Thanks for your feedback and sharing the final code.

  Let me know if you have any other questions.

  Regards