Implementing Multiline Text Editor in Syncfusion EJ2 Grid

[learn csharp]

I am currently working with the Syncfusion EJ2 Grid in my ASP.NET Core project. I have a grid set up with several columns, as shown below:

<ejs-grid id="grid" allowPaging="true" dataSource="@Model.Employees">

    <e-grid-editSettings allowAdding="true" mode="Batch"></e-grid-editSettings>

    <e-grid-columns>

        <e-grid-column field="Id" headerText="ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>

        <e-grid-column field="Name" headerText="Name" width="150"></e-grid-column>

        <e-grid-column field="Department" headerText="Department" width="150"></e-grid-column>

        <e-grid-column field="Position" headerText="Position" width="150"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

I am trying to implement a multiline text editor for the cells in the grid. I want to be able to press Enter to go to the next line and continue typing within the same cell. I have tried creating a custom editor, but I haven't been successful so far.

Could anyone guide me on how to achieve this functionality? Any help would be greatly appreciated.

[Vasanthakumar K]

Hi learn csharp,

Greetings from Syncfusion support

We have validated your query and understand that you need to use a multiline textbox in the grid's batch edit template with the enter key multiline textbox behavior. By default, the grid's enter key behavior in the batch edit form prevents the multiline textbox enter key behavior in the template. Therefore, for your specific requirement, we have prepared a sample that only prevents the grid's enter key behavior in the batch edit form for the particular edit cell to achieve your requirement. You can refer to the code example and sample below for reference.

[code example]

<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true" created="created">

    <e-data-manager url="/Home/UrlDataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor"></e-data-manager>

    <e-grid-editsettings allowEditing="true" mode="Batch"></e-grid-editsettings>

    <e-grid-pagesettings pageCount="1" pageSize="12"></e-grid-pagesettings>

    <e-grid-columns>

        . . . . . .

        <e-grid-column field="shipCountry" headerText="Ship Country" width="135" disableHtmlEncode="false" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"></e-grid-column>

        . . . . . .

    </e-grid-columns>

</ejs-grid>

<script type="text/javascript">

    var countryElem;

    var grid;

    function create() {

        grid.keyConfigs.enter = ''; // prevent grid’s enter behavior

        countryElem = document.createElement('textarea');

        return countryElem;

    };

    function read() {

        return countryObj.value;

    };

    function destroy() {

        grid.keyConfigs.enter = 'enter'; // reset grid’s enter behavior

        countryObj.destroy();

    };

    function write(args) {

        countryObj = new ej.inputs.TextBox({

            multiline: true,

            value: args.rowData['shipCountry'],

            placeholder: 'Enter your Country',

            floatLabelType: 'Auto'

        });

        countryObj.appendTo(countryElem);

    };

    function created(){

        grid = document.getElementById('Grid').ej2_instances[0];

    }

</script>

Sample: Please find the attachment.

Regards,

Vasanthakumar K

Attachment: 186846celledittemplatemultiline_dc1ace34.zip