Press "Enter" go to new line in TextArea in grid

Press "Enter" go to new line in TextArea in grid

Posted by: 1728884346 on 26 March 2018, 8:54 pm EST

• 

  1728884346

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 March 2018, 8:54 pm EST

  Hi,

  I have a grid and contain text area, when i type in this text area and i press "Enter", i want to go to new line in text area, but currently it jump out the text area.
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 28 March 2018, 5:49 pm EST

  Hi,
  
  We are sorry for the delayed response.
  
  As default Enter key used for selecting next row and finish editing if cell is in edit mode.

  To overcome this, you need to set keyActionEnter property to None or handle FlexGrid keydown event as follows and prevent default behavior for enter key.
  
  Please refer to the following sample code snippet:

  grid.hostElement.addEventListener('keydown',function(e){
  	if(grid.editRange){
  		e.preventDefault();
  		e.stopImmediatePropagation();
  	}
  },true);
  

  ~Manish

• 

  1728884346

  • Post Options:
  • Link
    Copy

  Posted 3 April 2018, 2:40 pm EST - Updated 29 September 2022, 1:59 am EST

  Hi Manish

  I have try to add KeyActionEnter as None, but it not work, if i press Enter, it still end the editing.

  Could you help to provide a demo about this?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 April 2018, 11:23 pm EST

  Hi,
  
  We are sorry for the inconvenience.
  
  We need to handle keydown event for Textarea it self and prevent further event for Enter key. Add new line for TextArea by code.
  
  Please use the following code snippet where input is TextArea reference:

  input.addEventListener("keydown", function (e) {
                  if (e.keyCode == 13) {
                      e.preventDefault();
                      e.stopImmediatePropagation();
                      var _val = e.target.value;
                      e.target.value = _val + '\n';
                  }
              }, true)
  

  For your information, from build 4.0.20183.150, multi line support has been added by setting Column’s multiLine property to true same as excel.
  
  Please use the following code snippet for the same:

   var grid = wijmo.grid.FlexGrid.getControl("#grid");
          grid.columns[1].multiLine = true;
  

  ~Manish

• 

  1728884346

  • Post Options:
  • Link
    Copy

  Posted 9 April 2018, 4:55 pm EST - Updated 29 September 2022, 1:59 am EST

  Hi Manish

  sorry for trouble, could you help to build a demo about how multiple line work? I don’t know how use, and i try something, but not work.

  and latest ComponentOne Version: 20181.1.17

  I saw below info, but don’t know how to use

  

  1176×516 33.9 KB

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 10 April 2018, 8:17 pm EST

  Hi,
  
  You need to handle ClientSide to allow in-built multi line editing. Please refer to the following code snippet for the same:

  <script>
      c1.documentReady(function () {
          var grid = wijmo.grid.FlexGrid.getControl("#grid");
          grid.columns.getColumn("ProductName").multiLine = true;
      });    
  </script>
  @(Html.C1().FlexGrid().Id("grid").AllowResizing(AllowResizing.Rows).Bind(b => b.Bind(Model))
                  .AutoGenerateColumns(false)
                  .Columns(c =>
                  {
                      c.Add(cb => cb.Binding("ProductID").Width("200"));
                      c.Add(cb => cb.Binding("ProductName").Width("200"));
                      c.Add(cb => cb.Binding("SupplierID").Width("200"));
                      c.Add(cb => cb.Binding("QuantityPerUnit").Width("200"));
                      c.Add(cb => cb.Binding("UnitPrice").Width("200"));
                      c.Add(cb => cb.Binding("UnitInStock").Width("200"));
                  })
              .Height("650px"))
  

  ~Manish