Button's onclick event occurs when the Enter key is pressed in the TextBox in the grid dialog.

[JaeHyeong Jang]

Hi

I can't speak English. So I use Google Translate.

Please understand if the explanation is not natural.

I am using the EditMode dialog of the grid.

There are TextBox and Button in dialog.

When click the button, another dialog box appears.

Pressing the Enter key in the text box closes the grid dialog and executes the Save function, and then executes the button's onclick event and displays another dialog.

I don't want other dialogs to appear when the Enter key is pressed in the TextBox.

Any help to me would be appreciated.

[Renjith Singh Rajendran]

Hi JaeHyeong, 

Greetings from Syncfusion support. 

We would like to inform you that, this is the default behavior of editing in Grid. When enter key is pressed in edit form, this will trigger the save action in Grid. 

Based on your scenario, we suggest you to use the EditTemplate feature of Grid to overcome this default behavior. With this, we suggest you to render a SfTextBox for the corresponding columns and bind @onkeypress event for the component. Now if enter key pressed for SfTextBox, this will enable the PreventUpdate flag variable.  

https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template 

Based on this PreventUpdate flag variable, we suggest you to cancel the save action by using “args.Cancel”. Please refer the codes below, 

 

<SfGrid DataSource="@Orders" ...> 

    ... 

    <GridEvents OnActionBegin="OnActionBegin" TValue="Order"></GridEvents>> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ... Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) ... Width="120"> 

            <EditTemplate> 

                <SfTextBox ID="CustomerID" Placeholder='CustomerID' FloatLabelType='@FloatLabelType.Always' @bind-Value="@((context as Order).CustomerID)" @onkeypress="@KeyPressHandler"> 

                </SfTextBox> 

            </EditTemplate> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

    private bool PreventUpdate { get; set; } = false; 

    private void KeyPressHandler(KeyboardEventArgs args) 

    { 

        if (args.Key == "Enter") 

        { 

            PreventUpdate = true; 

        } 

        else 

        { 

            PreventUpdate = false; 

        } 

    } 

    public void OnActionBegin(ActionEventArgs<Order> args) 

    { 

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save && PreventUpdate) 

        { 

            args.Cancel = true; 

            PreventUpdate = false; 

        } 

    } 

We are also attaching the sample for your reference. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Serversample-1389705594 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran