1. Home
  2. Forum
  3. Blazor
  4. SfGrid in webassembly project provides js errors at inline editing using grid.StatEdit or AllowEditOnDblClick=true

SfGrid in webassembly project provides js errors at inline editing using grid.StatEdit or AllowEditOnDblClick=true

Hello!
Need to turn row's edit at click by row.
Any your grid's inline editing sample placed in webassembly projects provides js errors:

blazor.webassembly.js:1 Uncaught (in promise) Error: System.ArgumentException: There is no event handler associated with this event. EventId: '81'.
Parameter name: eventHandlerId
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync (:44371/System.UInt64 eventHandlerId, Microsoft.AspNetCore.Components.RenderTree.EventFieldInfo fieldInfo, System.EventArgs eventArgs) <0x4cb5ba8 + 0x00054> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.DispatchEventAsync (:44371/System.UInt64 eventHandlerId, Microsoft.AspNetCore.Components.RenderTree.EventFieldInfo eventFieldInfo, System.EventArgs eventArgs) <0x4cb57e0 + 0x00078> in <filename unknown>:0 
  at :44371/Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.ProcessNextDeferredEventAsync () <0x52e2e18 + 0x000a6> in <filename unknown>:0 
    at Object.endInvokeDotNetFromJS (blazor.webassembly.js:1)
    at Object.invokeJSFromDotNet (blazor.webassembly.js:1)
    at _mono_wasm_invoke_js_marshalled (dotnet.3.2.0.js:1)
    at do_icall (:44371/<anonymous>:wasm-function[6049]:0x10f8b1)
    at do_icall_wrapper (:44371/<anonymous>:wasm-function[1896]:0x50b6a)
    at interp_exec_method (:44371/<anonymous>:wasm-function[1120]:0x2588e)
    at interp_runtime_invoke (:44371/<anonymous>:wasm-function[5655]:0xf7391)
    at mono_jit_runtime_invoke (:44371/<anonymous>:wasm-function[5109]:0xddb3d)
    at do_runtime_invoke (:44371/<anonymous>:wasm-function[1410]:0x3ba85)
    at mono_runtime_try_invoke (:44371/<anonymous>:wasm-function[418]:0xcfdb)

The same error occurs if AllowEditOnDblClick=true and double click by row


Attachment: BlazorApp1_ae239cef.rar

10 Replies
RS Renjith Singh Rajendran Syncfusion Team September 7, 2020 01:42 PM UTC

Hi Ivan, 

Greetings from Syncfusion support. 

Query : Error: System.ArgumentException: There is no event handler associated with this event. EventId: '81'.Parameter name: eventHandlerId 
We have analyzed the reported exception and it occur due to @onblur event of Blazor and it’s not related to Syncfusion components alone, it is a Framework issue.   

Please find the below Github issue which is reported by Blazor team. Once the below issue gets resolved, then this error will not be thrown. So please follow up on the below github link for future updates from Blazor team. 

Also above error will not affect the default functionality of Grid Editing. Please get back to us if you have further queries.      

Regards,  
Renjith Singh Rajendran 


AN Andy May 12, 2021 02:27 PM UTC

Hi Renjith I'm using the double click event in the grid within the Select row event and is raising the same error

RS Renjith Singh Rajendran Syncfusion Team May 14, 2021 02:52 AM UTC

Hi asdf, 

Greetings from Syncfusion support. 

Query : I'm using the double click event in the grid within the Select row event and is raising the same error 
We are not clear about this scenario. We need the following details to further proceed on this. Kindly share with us the following details for better assistance. 

  1. Share the custom codes you have used for performing editing action in grid.
  2. Are you performing Grid editing in OnRecordDoubleClick event?
  3. Share the complete Grid rendering codes.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith R 


AS Adriana Selena Tito Ilasaca replied to Renjith Singh Rajendran July 19, 2021 11:21 PM UTC

Hi, I am getting the same error. I think this error is displayed when the project's Target Framework is .net standard 2.1.

I am attaching a demo project where you can see the error while clicking once in the editable cell



Attachment: BlazorApp1_5ce7cb8f.rar

RS Renjith Singh Rajendran Syncfusion Team July 23, 2021 03:54 AM UTC

Hi Adriana, 

Greetings from Syncfusion support. 

Based on this scenario, we have modified the shared wasm application to perform single click edit action in Grid and overcome the exception. Please download the sample from the link below, 

In the above sample we have used Microsoft JsInterop to bind click event for Grid and called the blur() method based on target. We have used the Created event of Grid to invoke the JS method. Please refer the codes below, 


<SfGrid ID="Grid" @ref="GridInstance" ...> 
    <GridEvents Created="Created" CellSelected="CellSelectHandler" TValue="Order"></GridEvents> 
    ... 
</SfGrid> 

public void Created(){    IJSRuntime.InvokeAsync<object>("singleedit");}
public async Task CellSelectHandler(CellSelectEventArgs<Order> args) 
{ 
    ... 
    await Task.Yield(); 
    await GridInstance.EditCell(CurrentEditRowIndex, fields[CurrentEditCellIndex]); 
} 
[singleedit.js] 
 
function singleedit() { 
    document.getElementById("Grid").addEventListener("click", function (e) { 
        if (e.target.tagName == "TD") { 
            e.target.blur(); 
        } 
    }); 
} 


Please get back to us if you have further queries.      

Regards,  
Renjith R 


AS Adriana Selena Tito Ilasaca August 3, 2021 03:10 AM UTC

Hi Thanks for the answer is working fine but sometimes when you click twice the grid break down, Console errors are fired 

  Unhandled exception rendering component: Event 1013 is already tracked

      Error: Event 1013 is already tracked
You can reproduce it with the sample you attached.
I am adding a GIF


Attachment: 4SyncfusionBlazorGridDoubleClick_c893aa25.rar

RS Renjith Singh Rajendran Syncfusion Team August 6, 2021 03:30 PM UTC

Hi Adriana, 

We checked this double click problem with our sample shared from previous update. But we could not face this reported problem from our side. We are attaching a video demo prepared from our side, please download and refer the video from the link below, 
 
If you are still facing difficulties, then kindly share with us a simple issue reproducing sample for us to validate based on your requirement and proceed further. 

Regards, 
Renjith R 


AS Adriana Selena Tito Ilasaca August 9, 2021 05:54 PM UTC

Hi 

- I can still reproduce the error by double click an editable cell, I watched your demo video but I can't notice the double click.

The version is 19.1.0.69, The target framework is netstandard2.1

- Another thing is that with your suggested solution, using JS Interops and the OnCreate callback when you use the arrows hotkeys left and right the grid gets broken. You can reproduce this by select a non-editable cell and when press ->(right) hotkey to move to an editable cell the grid breaks down (noticed the Task.Yield is the method that causes the issue).

This does not happen when the suggested solution is not implemented(you can try this on the Counter razor page in the attached demo). I this case what happens is when you go from a non-editable to an editable cell with the right and left arrow hotkeys the edition gets enabled and then if you press the arrows the focus does not move to the left or right cell.
I think there should be a callback where I can notice which hotkey is pressed and if is an arrow, then close the edition and be able to navigate with arrows among editable and non-editable cells, right?

I am attaching gif's with demos and to reproduce both in the index and the second in counter razor pages


Attachment: BlazorApp11744454801_4eed3fd0.rar

RS Renjith Singh Rajendran Syncfusion Team August 11, 2021 03:36 AM UTC

Hi Adriana, 

We are able to reproduce the reported problems from our side. We are currently checking the shared sample, we will update you further details within two business days on or before August 13, 2021. 

Until then we appreciate your patience. 

Regards, 
Renjith R 


RS Renjith Singh Rajendran Syncfusion Team August 13, 2021 01:13 PM UTC

Hi Adriana, 

Query 1 : when you use the arrows hotkeys left and right the grid gets broken. && but sometimes when you click twice the grid break down 
We suggest you to use the RowSelected and OnRecordClick events to achieve single click batch editing in Grid, and overcome the reported grid breaking problems. We have prepared a sample for your convenience, please download the sample from the link below, 
References : 

Please refer the codes below, 

<GridEvents Created="Created" OnRecordClick="OnRecordClick" RowSelected="RowSelected" TValue="Order"></GridEvents>
public async Task Created(){     
    await IJSRuntime.InvokeAsync<object>("singleedit"); 
} 
... 
public bool flag = false; 
public string currentclickedcolumn{ get; set; } 
public async Task OnRecordClick(RecordClickEventArgs<Order> args) 
{ 
    Console.WriteLine("OnRecordClick"); 
    flag = true; 
    currentclickedcolumn = args.Column.Field; 
} 
public async Task RowSelected(RowSelectEventArgs<Order> args) 
{ 
    if (flag) 
    { 
        Console.WriteLine("RowSelected"); 
        flag = false; 
        await GridInstance.EditCell(args.RowIndex, currentclickedcolumn); 
        await Task.Yield(); 
    } 
} 

 

Query 2 : I this case what happens is when you go from a non-editable to an editable cell with the right and left arrow hotkeys the edition gets enabled and then if you press the arrows the focus does not move to the left or right cell. 
By default, we have support to perform batch editing in cells with KeyBoard shortcut using “Tab” key. So, we suggest you to use the Tab key to achieve this requirement. You can navigate with keyboard for cell editing through the Grid cells in row in both left and right direction using Tab and Shift+Tab keys. 

We have also prepared a video demo showing this behavior, please download the video demo from the link below, 

Please get back to us if you need further assistance. 

Regards, 
Renjith R 


Loader.
Up arrow icon