1. Home
  2. Forum
  3. Blazor
  4. Is there a way to tell that the grid is currently being edited (is in an editing state)?

Is there a way to tell that the grid is currently being edited (is in an editing state)?

I have a few grids (using batch mode) in a Blazor component and a single save button. The save button is designed to save all of the data within the component (including the grids). Is there a property that can tell me that the grid is being edited? I'd like to warn the user that they have pending edits that haven't been updated.

5 Replies 1 reply marked as answer
JP Jeevakanth Palaniappan Syncfusion Team February 1, 2021 01:31 PM UTC

Hi Dallas, 

Greetings from Syncfusion support. 

We have validated your query and we suggest you to achieve your requirement by toggling true/false in a local variable by using the OnCellEdit and OnCellSave event of the grid. 

Please refer the below code snippet and the sample for your reference. 

<button @onclick="CheckEditState">CheckEditState</button> 
 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 
    <GridEvents OnCellEdit="CellEdit" OnCellSave="CellSaveHandler" TValue="Order"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 
.. 
.. 
 
@code{ 
 
    bool IsEdit { get; set; } 
 
    public void CheckEditState() { 
        Console.WriteLine(IsEdit); 
    } 
 
    public void CellEdit(CellEditArgs<Order> args) 
    { 
        IsEdit = true; 
    } 
    public void CellSaveHandler(CellSaveArgs<Order> args) 
    { 
        IsEdit = false; 
    } 
} 


Documentation: 


Please get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


Marked as answer
DK Dallas Kostna February 1, 2021 09:55 PM UTC

Thank you for the quick reply! This will work well, other than one situation. If I start editing the grid and then press the "Esc" key, no event appears to fire. This leaves the IsEdit boolean set to "true". Is there a way to detect that editing has been canceled? I suppose I could handle the OnToolbarClick event for the situation when the user clicks that. However, that doesn't address the "Esc" key.

JP Jeevakanth Palaniappan Syncfusion Team February 2, 2021 12:30 PM UTC

Hi Dallas, 

We suggest you to achieve your requirement by using the Microsoft JSInterop. Please find the below code snippet and the sample for your reference. 

Index.razor 
 
@inject IJSRuntime JSRuntime 
 
.. 
.. 
 
    protected override void OnAfterRender(bool firstRender) { 
        if (firstRender) { 
            var dotNetReference = DotNetObjectReference.Create(this); 
            JSRuntime.InvokeAsync<string>("KeyPressHandler", Grid.ID , dotNetReference); 
        } 
    } 
 
    [JSInvokable] 
    public void KeyDownHandler() { 
        IsEdit = false; 
    } 


Javascript.js 
function KeyPressHandler(id, dotNetReference) { 
    document.getElementById(id).addEventListener('keydown', (e) => { 
        if (e.key == "Escape") { 
            dotNetReference.invokeMethodAsync('KeyDownHandler'); 
        } 
    }); 
} 

Host.cshtml 
.. 
<script src="~/JavaScript.js"></script> 
. .  
 

Regards, 
Jeevakanth SP. 


DK Dallas Kostna February 2, 2021 02:58 PM UTC

Some of my grids are on a separate tab, so an error is thrown when the OnAfterRender runs. I'd like to avoid JavaScript to keep speed and reliability up.

In the future, if the grid could have a property for indicating that an edit is in progress, that would be great. I'll wait until then.

Thanks for your help.

JP Jeevakanth Palaniappan Syncfusion Team February 3, 2021 07:45 AM UTC

Hi Dallas, 
 
We have considered your requirement as a usability improvement and logged the improvement task “Need a public property to check whether the grid is in edit state or not” for the same. Thank you for taking the time to request this improvement and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the improvement feature in our upcoming patch release which is expected to be rolled out by the end of February. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.     
 
 
Until then we appreciate your patience. 
 
Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon