SyncFusion Grid Firing Events when editing from in the Template pop Up

[chris prince]

I have a c# server blazor app

I am using  <SfGrid> to display data.

When I click add  button on the grid I have defined a <template> for the pop up which appears.
Within this <template> i use  <SfDatePicker>.  Everything is fine until I press enter on the  <SfDatePicker> as this fires off the RowUpdating event.

How can I stop this enter key press from firing rowupdating event?

[Guhanathan Ramanathan]

Hi chris prince,

Greeting from the syncfusion

 

Based on your requirement to "prevent the Enter key from closing the DataGrid dialog", we suggest using Microsoft JSInterop to block the Enter key functionality. we've utilized a JavaScript method to prevent the default save action when the Enter key is pressed in the Grid. Please refer to the attached code snippet and sample for your reference.

<SfGrid DataSource="@GridData" AllowPaging="true" Toolbar="@(new string[] { "Add", "Edit", "Delete", "Update", "Cancel" })">

                <GridEvents RowUpdating="RowUpdatingHandler" TValue="OrdersDetails"></GridEvents>

                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams">    

                           <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>

                </GridColumns>

 </SfGrid>

    

@code {

    public DialogSettings DialogParams { get; set; } = new DialogSettings { Height = "300px", Width = "300px" };

    private List<OrdersDetails> GridData;

    public async Task RowUpdatingHandler(RowUpdatingEventArgs<OrdersDetails> args)

    {

        await JSInterop.InvokeVoidAsync("preventselection");

        bool IsEnter = await JSInterop.InvokeAsync<bool>("returnIsEnterKeyPressed");

        if (IsEnter)

        {

            args.Cancel = true;

        }

    }

    

}

var IsEnterKeyPressed = false;

function preventselection() {

    document.addEventListener("keydown", function (e) {

        if (e.key === "Enter") {

            IsEnterKeyPressed = true;

            e.stopPropagation();

            e.preventDefault();

        } else {

            IsEnterKeyPressed = false;

        }

    });

    document.addEventListener("click", function (e) {

        if (e.target.innerText === "Update" && e.isTrusted) {

            IsEnterKeyPressed = false;

        }

    });

}

function returnIsEnterKeyPressed() {

    return IsEnterKeyPressed === true;

}

Regards,

Guhanathan R

Attachment: BlazorApp3_4_(2)_2295f81e.zip