1. Home
  2. Forum
  3. Blazor
  4. Grid editing multiline doesnt allow enter/newline

Grid editing multiline doesnt allow enter/newline

Hello,

With the grid EditTemplate and also when including input fields in a DetailTemplate, a multiline text field doesn't allow the enter button to be pressed. Pressing enter causes the text field to lose focus. This can be replicated using the example in the docs  Editing in Blazor DataGrid Component | Syncfusion with the CustomEditorParams, setting the text field to multiline still doesnt allow newlines to be entered.

Thanks.


3 Replies
RN Rahul Narayanasamy Syncfusion Team February 7, 2022 01:30 PM UTC

Hi Ben, 

Greetings from Syncfusion. 

By default while pressing enter in edited state, the edited row will be saved. This is the default behavior of using Enter key in Grid editing. You want to move the cursor to next line in multiline enabled textbox. Based on this scenario, we suggest you to render the multiline textbox using EditTemplate feature of Grid. Now use the Microsoft JsInterop support to call a JavaScript method and prevent the default save action on pressing the Enter key in Grid. 

We have modified the attached sample for your convenience, please download the sample from the link below, 

[Index.razor] 
 
@inject IJSRuntime Runtime 
 
<SfGrid DataSource="@OrderData" Toolbar=@ToolbarItems> 
    <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Center" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" TextAlign="TextAlign.Center" Width="130"> 
            <EditTemplate> 
                <SfTextBox ID="CustomerID" OnFocus="Focus" ShowClearButton="false" Multiline="true" @bind-Value="((context as Order).CustomerID)"> 
                </SfTextBox> 
            </EditTemplate> 
        </GridColumn> 
        . ..  
    </GridColumns> 
</SfGrid> 
@code{ 
    public void Focus()  
    { 
        //pass ID(column name) of multiline textbox 
        Runtime.InvokeVoidAsync("EditKeyDown", "CustomerID"); 
    }  
 
    . ..  
} 
[JavaScript.js] 
function EditKeyDown(id) { 
    document.getElementById(id).addEventListener("keydown", function (e) { 
        if (e.key == "Enter") { 
            e.stopPropagation(); 
        } 
    }); 
} 
[_Host.cshtml] 
<head> 
    . ..  
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />     
    <script src="JavaScript.js"></script> 
</head> 

Reference: 


Please let us know if you have any concerns. 

Regards, 
Rahul 


BM Ben Mann February 8, 2022 03:24 PM UTC

Hello,

Many thanks for this, it has fixed our issue.

Thanks again.

Ben.


RN Rahul Narayanasamy Syncfusion Team February 9, 2022 05:44 AM UTC

Hi Ben, 
 
Thanks for the update. 
 
We are happy to hear that the problem was resolved. Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


Loader.
Up arrow icon