1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. How Do You Use Column Template Multiline Textbox In an Inline Editable Grid?

How Do You Use Column Template Multiline Textbox In an Inline Editable Grid?

Hi, I can currently add the template textbox but when trying to press Enter to move to the next line, the form submits.  What to do?

Thanks

13 Replies
RS Rajapandiyan Settu Syncfusion Team March 31, 2020 10:40 AM UTC

Hi Arian, 

Greetings from syncfusion support. 

Query : I can currently add the template textbox but when trying to press Enter to move to the next line, the form submits.  What to do? 
 
We have validated the provided details. While on editing the record in the grid, pressing Enter key is ends the edit. This is the default behavior of the grid. You can achieve your requirement by using the below ways. 
  1. Press the SHIFT+ENTER keys in the textbox element to move the next line. (or)
  2. Remove the ENTER key’s functionality in the grid’s created event. Which prevents all the actions of Enter Key. Please refer the below code example and sample for more information.


created:function(args){ 
      this.keyConfigs.enter = ''   // remove the enter key’s action in the grid 
    } 


   

Please get back to us if you need further assistance on this. 

Regards, 
Rajapandiyan S.

JO Jim Oliver April 22, 2020 05:42 PM UTC

I have a question. This example works perfectly for me, except the grid does not display the carriage returns.  It treats them as html whitespace and removes them.

I've tried disableHtmlEncode: false and converting the carriage returns to
tags, but these show up in the text box as tags instead of CRs.

How can I display carriage returns in the grid and the textarea at the same time?

RS Rajapandiyan Settu Syncfusion Team April 23, 2020 02:26 PM UTC

Hi Jim, 

Greetings from syncfusion support. 

Query : the grid does not display the carriage returns.  It treats them as html whitespace and removes them. I've tried disableHtmlEncode: false and converting the carriage returns to tags, but these show up in the text box as tags instead of CRs. How can I display carriage returns in the grid and the textarea at the same time? 

In Excel sheet carriage returns means it breaks the current line and move to the next line. From your query we could see that you need to save the record as like in the textbox not a single line with the white spaces. For this you have tried with CR tags, but there is no html element like this. Instead of that use BR element tag which is used to breaks the line. We have prepared a sample with this, please refer that for more information. 


------- 
var grid = new ej.grids.Grid({ 
  dataSource: [{ 
    OrderID: 10250, 
    CustomerID: "HANAR", 
    Freight: 65.83, 
    ShipCity: "Rio de Janeiro<br/>uyyuyuu<br/>ghdaj"  // use the BR element to break the lines 
  }], 
  allowPaging: true, 
  height: '300px', 
  toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
  columns: [ 
    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true }, 
    { field: 'Freight', headerText: 'Freight', format: 'C2', width: 120 }, 
    { 
      field: 'ShipCity', headerText: '<span>ShipCity</span>', disableHtmlEncode: false, width: 150, edit: { 
        -----}}] 
---------- 
}); 
grid.appendTo('#Grid'); 




please get back to us if you need further assistance on this. 

Regards, 
Rajapandiyan S 


JO Jim Oliver April 23, 2020 08:04 PM UTC

Your sample shows the problem, not the solution.

When editing, the line breaks show as "<br>".

The end user doesn't know what a <br> tag is, or does.  They are expecting a carriage return to be a carriage return.

Other forms (including the edit box I am typing in right now) converts the <br> tags to CRs back and forth.

How do I do that with a <textarea> and a EJ grid?

RS Rajapandiyan Settu Syncfusion Team April 24, 2020 01:24 PM UTC

Hi Jim, 

Thanks for your update. 

Query : They are expecting a carriage return to be a carriage return. Other forms (including the edit box I am typing in right now) converts the <br> tags to CRs back and forth. How do I do that with a <textarea> and a EJ grid? 

We need more information to understand your requirement correctly. So can you please share below details to proceed further. 
  1. Explain your requirement in detail with some pictorial representation.
  2. Share the screenshot of expected result and actual result while on editing.
  3. Share the screenshot of expected result and actual result after the record saved in grid.
  4. Share the video demonstration of the grid.

The above details are highly requested to provide the solution ASAP.  
 
Regards, 
Rajapandiyan S 


SS Stephan Schrade October 30, 2021 10:21 PM UTC

Hello support,

I do have exactly the same problem as Jim describes.

When I use a multiline textbox, data sent to the server does include a line break (CR). This is ok for me. I can save this data in my database.

Afterwards I can use this data to display the value somewhere on my website when I replace the CR with HTML BR
on the fly. This is ok.

But in the grid, the multiline text is displayed as a single line text when the grid is not in edit mode.

This will cause confusion to the editor, as the line break is only visible when the grid is in edit mode.

What can we do?

Regards,

Stephan


RS Rajapandiyan Settu Syncfusion Team November 1, 2021 11:24 AM UTC

Hi Stephan,  

Greetings from Syncfusion support. 

Query: But in the grid, the multiline text is displayed as a single line text when the grid is not in edit mode. 
This will cause confusion to the editor, as the line break is only visible when the grid is in edit mode. 

We have analyzed your query at our end. In EJ2 Grid, the htmlString are shown as like in the dataSource. By setting the disbleHtmlEncode property of column as false, you can decode the htmlString into html Elements for that column. This can be explained in the below documentation. 



[index.js] 

var grid = new ej.grids.Grid({ 
    dataSource: data, 
    columns: [ 
        { field: 'CustomerID', headerText: 'Customer ID', disableHtmlEncode: false, width: 120 }, 
        --- 
    ] 
}); 
grid.appendTo('#Grid'); 



Still, if you face the issue, kindly share the below details to validate further. 

  1. Share the complete Grid code.
  2. Share the screenshot and video demo of the reported issue.
  3. Share the example dataSource which you have bind to the Grid.

Regards,  
Rajapandiyan S 


SS Stephan Schrade November 1, 2021 05:00 PM UTC

Hi support,

please try this yourself.

It is easy to reproduce.

The code of the grid is:


{ field: 'location', headerText: 'Yii::t('app', 'Location')?>', width: 280,
edit: {
create: function () {
elemContent = document.createElement('textarea');
return elemContent;
},
destroy: function () {
textEditor.destroy();
},
read: function () {
return textEditor.value;
},
write: function (args) {
textEditor = new ej.inputs.TextBox({
multiline: true,
value: args.rowData[args.column.field],
floatLabelType: 'Auto',
placeholder: 'Yii::t('app', 'Location')?>',
height: 200,
});
textEditor.appendTo(elemContent);
}
},
width: 90,
},


The data sent to the grid is:

(I have replaced the "backslash n" with ":CR:" here, because the forum does not show it. The server of course sends a "backslash n" to the grid)

{

"result": [

{

"coursecalblockid": 1,

"caption": "Test1",

"DateFromLocalized": "14.08.2021",

"DateToLocalized": "22.08.2021",

"DateFromJSDate": "2021-08-14T00:00:00+02:00",

"DateToJSDate": "2021-08-22T00:00:00+02:00",

"NoOfDays": 9,

"location": "First row:CR:Second row",

"priceperday": 55

},

{

"coursecalblockid": 2,

"caption": "Test 2",

"DateFromLocalized": "01.10.2021",

"DateToLocalized": "04.10.2021",

"DateFromJSDate": "2021-10-01T00:00:00+02:00",

"DateToJSDate": "2021-10-04T00:00:00+02:00",

"NoOfDays": 4,

"location": "First row:CR:Second row",

"priceperday": 0

}

],

"count": 2

}


Here you see a screenshot of the issue.

Bildschirmfoto 2021-11-01 um 17.41.16.png

The first row of the gird is in inline edit mode and you can see, that the data contains two lines with one CR.

The second row of the grid contains the same data as the first, but is not in edit mode. Here you can see, that the CR has no effect.


Activating HTML does not help at all, because the CR will not be considered as a BR-tag. So there will be no change on the screen.

And if I replace the CR with a BR-tag on the server side and send it back to the grid, the text is displayed correct at non edit mode, but as soon as I enter the edit mode, the BR-tag is visible and the user gets confused.

Regards,

Stephan


RS Rajapandiyan Settu Syncfusion Team November 2, 2021 01:51 PM UTC

Hi Stephan,  

Thanks for your update. 

We have validated your requirement at our end. We suggest you to maintain ‘\n’ in your server and Grid’s dataSource. In EJ2 Grid, we have the support to customize the innerText of cell by using valueAccessor method. 


In that valueAccessor, we have replaced the ‘\n’ with ‘<br>’ tag which resolve the reported problem. Find the below code example and sample for your reference. 


[index.js] 

 
var grid = new ej.grids.Grid({ 
  dataSource: [ 
    { 
      OrderID: 10250, 
      CustomerID: 'HANAR', 
      Freight: 65.83, 
      location: 'First row\nSecond row', // maintain ‘\n’ in the grid dataSource 
    }, 
  ], 
  columns: [ 
    --- 
    { 
      field: 'location', 
      headerText: '<span style="color:red">ShipCity</span>', 
      disableHtmlEncode: false, 
      valueAccessor: valueAccessor, 
      width: 150, 
      edit: { 
         --- 
          } 
    }, 
  ], 
  created: function (args) { 
    this.keyConfigs.enter = ''; 
  }, 
}); 
grid.appendTo('#Grid'); 
 
function valueAccessor(field, data, column) { 
  var value = data[field]; 
  // replace the /n with the <br> 
  return value.split('\n').join('<br>'); 
} 
 



Note: 
By using the valueAccessor API, we can show the customized value in the Grid column. But this is used only for the display purpose. All the Grid actions like Filtering, Searching, Grouping, Sorting, etc., are performed with the Grid’s dataSource value based on its column field name not with the customized value. This is the behavior of EJ2 Grid. 

Please get back to us if you need further assistance with this. 

Regards,  
Rajapandiyan S 


SS Stephan Schrade November 5, 2021 08:11 PM UTC

Hi support,

many thanks.

This works now, although it is a little bit complicated.

It would be better, if this would be a built in feature.

Please include the solution in your documentation.

Regards,

Stephan


RS Rajapandiyan Settu Syncfusion Team November 8, 2021 08:52 AM UTC

Hi Stephan,  

We are glad that you have achieved your requirement with the provided solution. 

Based on your requirement, you want to show the customized text in the Grid column. So, we need to do the customization from the sample level only and it is not feasible to include it in the Grid source. We suggest you to use the previous solution for your requirement. 

We will include this requirement in our documentation and it will be refreshed online in any of our upcoming release. 

Please get back to us if you need further assistance. 

Regards,  
Rajapandiyan S 


SS Stephan Schrade November 17, 2021 01:49 PM UTC

Hi support,

I found an issue with your solution.

If I want to make a new entry, the valueAccessor function fails, because the variable value is undefined.

So I extend your code as follows

function valueAccessor(field, data, column) {
let value = data[field];
// replace the /n with the <br>
if (typeof value === 'string') {
return value.split('\n').join('<br>');
} else {
return value;
}
}

Regards,

Stephan



RS Rajapandiyan Settu Syncfusion Team November 18, 2021 03:30 AM UTC

Hi Stephan,  

Yes, You can use the condition in the valueAccessor if the value is undefined or null. Which resolves the reported behavior. 

Please get back to us if you need further assistance. 

Regards,  
Rajapandiyan S 


Loader.
Up arrow icon