DataGrid doesn't cancel edit from onkeydown #544

New Issue

claunia · 2026-01-29T17:39:02Z

claunia commented

2026-01-29 17:39:02 +00:00

Originally created by @AdamJachocki on GitHub (Sep 13, 2022).

Hi, I have a DataGrid with only one editable column, like:

<RadzenDataGrid @ref="grid" 
    Data="@ViewModel.Composition"
    TItem="ProductPartyCompositionItemViewModel"
    EditMode="DataGridEditMode.Single"
>
    <Columns>
        <RadzenDataGridColumn TItem="ProductPartyCompositionItemViewModel" Property="TemplateCompositionItem.ProductComponent.Name" Title="Composite" />
        <RadzenDataGridColumn TItem="ProductPartyCompositionItemViewModel" Property="NetUnitPrice" Title="Net price">
            <Template Context="item">
                <a href="javascript: void(0)" @onclick="@(() => OnEditNetPriceClicked(item))">@(item.NetUnitPrice.ToString("C"))</a>
            </Template>
            <EditTemplate Context="item">
                <RadzenNumeric TValue="decimal" @bind-Value="@item.NetUnitPrice" Format="C" ShowUpDown="false" Name="net-price" 
                                @onkeydown="@((args) => OnEditCellKeyDown(args, item))"/>
            </EditTemplate>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

(some columns deleted for brevity)

As you can see, there is an anchor that I can click to edit the column. Anchor calls OnEditNetPriceClicked which looks like that:

protected async Task OnEditNetPriceClicked(ProductPartyCompositionItemViewModel item)
{
    await grid.EditRow(item);
}

Now I want to accept changes when user presses Enter or cancel them when he presses Escape. So I have such code:

protected async Task OnEditCellKeyDown(KeyboardEventArgs args, ProductPartyCompositionItemViewModel item)
{
    switch (args.Key)
    {
        case "Enter":
            await OnSaveRowClicked(item);
            break;

        case "Escape":
            OnCancelRowClicked(item);
            break;
    }
}

And OnCancelRowClicked is just simple as:

protected void OnCancelRowClicked(ProductPartyCompositionItemViewModel item)
{
    item.NetUnitPrice = 0;
    grid.CancelEditRow(item);
}

And the funny thing is that when OnCancelRowClicked is called from OnEditCellKeyDown it doesn't work. I mean - the value doesn't updates to 0. It's just stays like I typed in the grid.

But when I call OnCancelRowClicked from other kind of action, for example some button click - everything works fine.

So it looks like calling the method from OnKeyDown doesn't work for some reason.

Originally created by @AdamJachocki on GitHub (Sep 13, 2022). Hi, I have a DataGrid with only one editable column, like: ``` <RadzenDataGrid @ref="grid" Data="@ViewModel.Composition" TItem="ProductPartyCompositionItemViewModel" EditMode="DataGridEditMode.Single" > <Columns> <RadzenDataGridColumn TItem="ProductPartyCompositionItemViewModel" Property="TemplateCompositionItem.ProductComponent.Name" Title="Composite" /> <RadzenDataGridColumn TItem="ProductPartyCompositionItemViewModel" Property="NetUnitPrice" Title="Net price"> <Template Context="item"> <a href="javascript: void(0)" @onclick="@(() => OnEditNetPriceClicked(item))">@(item.NetUnitPrice.ToString("C"))</a> </Template> <EditTemplate Context="item"> <RadzenNumeric TValue="decimal" @bind-Value="@item.NetUnitPrice" Format="C" ShowUpDown="false" Name="net-price" @onkeydown="@((args) => OnEditCellKeyDown(args, item))"/> </EditTemplate> </RadzenDataGridColumn> </Columns> </RadzenDataGrid> ``` (some columns deleted for brevity) As you can see, there is an anchor that I can click to edit the column. Anchor calls OnEditNetPriceClicked which looks like that: ``` protected async Task OnEditNetPriceClicked(ProductPartyCompositionItemViewModel item) { await grid.EditRow(item); } ``` Now I want to accept changes when user presses Enter or cancel them when he presses Escape. So I have such code: ``` protected async Task OnEditCellKeyDown(KeyboardEventArgs args, ProductPartyCompositionItemViewModel item) { switch (args.Key) { case "Enter": await OnSaveRowClicked(item); break; case "Escape": OnCancelRowClicked(item); break; } } ``` And OnCancelRowClicked is just simple as: ``` protected void OnCancelRowClicked(ProductPartyCompositionItemViewModel item) { item.NetUnitPrice = 0; grid.CancelEditRow(item); } ``` And the funny thing is that when OnCancelRowClicked is called from OnEditCellKeyDown it doesn't work. I mean - the value doesn't updates to 0. It's just stays like I typed in the grid. But when I call OnCancelRowClicked from other kind of action, for example some button click - everything works fine. So it looks like calling the method from OnKeyDown doesn't work for some reason.

claunia closed this issue

2026-01-29 17:39:02 +00:00

claunia commented

2026-01-29 17:39:03 +00:00

@enchev commented on GitHub (Sep 13, 2022):

I'm afraid that I cannot reproduce such problem using our example for inline edit:

@enchev commented on GitHub (Sep 13, 2022): I'm afraid that I cannot reproduce such problem using our example for inline edit: ![image](https://user-images.githubusercontent.com/5804953/189901369-1bab3818-ad65-427e-a185-04e784896abe.png) ![image](https://user-images.githubusercontent.com/5804953/189901411-94e2166c-b579-41de-a611-e98f7e643776.png) ![image](https://user-images.githubusercontent.com/5804953/189901599-f63953d1-d586-469a-a743-a89139c62d39.png) ![image](https://user-images.githubusercontent.com/5804953/189901638-6de0989b-a7d9-48f9-8415-7aea7b10e980.png)

claunia commented

2026-01-29 17:39:04 +00:00

@AdamJachocki commented on GitHub (Sep 13, 2022):

Your example works, because as I said - it uses button click action to cancel the editing. As I said - this works. But if you would like to cancel editing on key press (for example - pressing the escape key - as in my code) it won't work.

@AdamJachocki commented on GitHub (Sep 13, 2022): Your example works, because as I said - it uses button click action to cancel the editing. As I said - this works. But if you would like to cancel editing on key press (for example - pressing the escape key - as in my code) it won't work.

claunia commented

2026-01-29 17:39:05 +00:00

@enchev commented on GitHub (Sep 15, 2022):

Check once again the code screenshot.

@enchev commented on GitHub (Sep 15, 2022): Check once again the code screenshot.

claunia referenced this issue

2026-01-29 18:17:52 +00:00

[PR #544] [MERGED] Change to DatePicker to optionally pad the time picker hour, minute o… #2232

Sign in to join this conversation.