Is there a way to only edit a single cell in a grid when the cell is clicked on.

[ScottAtScorpios]

I was wondering if I could get some direction on how to achieve editing a single cell in a grid instead of the whole row.

I have a fully dynamic data table (the number of columns and rows will be unknown until the user make a selection as to what to render in the grid during runtime.

Since the number of columns can be quite large I would like to have the user only edit the value in the cell they click on

1) is there a way to only edit a single cell in the gird when a user clicks on the cell to make a change to the value?

2) is there a way to get the row and column names of the cell that is clicked on?

Any pointers on how to achieve this would be appreciated.

Thanks

[Vignesh Natarajan]

Hi Scott, 

 

Thanks for contacting Syncfusion support.  

 

Query: “is there a way to only edit a single cell in the gird when a user clicks on the cell to make a change to the value?” 

 

We have analyzed your query and we understand that you want to perform edit operation on single cell instead of row. We suggest you to achieve your requirement using Batch edit mode. Batch editing is a cell based editing and multiple changes from different rows can be saved on single Update click.  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/editing/#batch  

Please get back to us if you have further queries.  

 

Query: “is there a way to get the row and column names of the cell that is clicked on?”  

 

CellSelected event will be triggered while clicking a cell in Grid. In that event arguments, we can get the clicked cell details. Refer the below documentation for your reference  

 

https://blazor.syncfusion.com/documentation/datagrid/events/#cellselected  

Please get back to us if you have further queries.  

 

Regards,
Vignesh Natarajan 

[ScottAtScorpios]

Thank you for your help.

1) This looks to have solved my problem with editing a single cell.

2) I made the change recommend by you unfortunately it is causing a crash on the page

I added the Cell Selected event handler

<GridEvents CellSelected="CellSelectedHandler" TValue="System.Dynamic.ExpandoObject"></GridEvents>

And the handler

 public void CellSelectedHandler(CellSelectEventArgs<System.Dynamic.ExpandoObject> args)

    {

        Log.Debug("In CellSelectedHandler()");       

    }

I am thinking that I might not have the correct TValue set, but unsure.

The example of the Gid events in the documentation is very simplistic.

As I mentioned the grid is fully dynamic and I am mapping the data table to 

and ExpandoObject like is you have shown in another example in your documentation

lstObj = new List<System.Dynamic.ExpandoObject> ();

        foreach (DataRow row in gridData.Rows)

        {

            System.Dynamic.ExpandoObject e = new System.Dynamic.ExpandoObject();

            foreach (DataColumn col in gridData.Columns)

                e.TryAdd(col.ColumnName, row.ItemArray[col.Ordinal]);

            lstObj.Add(e);

        }

This is the exception:

blazor.webassembly.js:1 Uncaught (in promise) Error: System.ArgumentException: There is no event handler associated with this event. EventId: '212'.

Parameter name: eventHandlerId

  at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync (:44316/System.UInt64 eventHandlerId, Microsoft.AspNetCore.Components.RenderTree.EventFieldInfo fieldInfo, System.EventArgs eventArgs) <0x3c61ed0 + 0x00054> in <filename unknown>:0 

  at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.DispatchEventAsync (:44316/System.UInt64 eventHandlerId, Microsoft.AspNetCore.Components.RenderTree.EventFieldInfo eventFieldInfo, System.EventArgs eventArgs) <0x3c61b08 + 0x00078> in <filename unknown>:0 

Do you think I have the right TValue specified?

 

[Maran Baskar]

Hi Scott,

Yes, you have specified the TValue correctly. We have validated the reported issue but could not reproduce the issue at our end. We have prepared a sample from our end.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorClient-865623672 

If you are still facing the issue

        1. please reproduce the issue in our given sample

        2. If possible, please share your sample, so that we can give you better response

Regards,

Maran Baskar

[ScottAtScorpios]

if you change your Grid events from this

<GridEvents CellSelected="cellselecthandler"                           

                            TValue="ExpandoObject">

</GridEvents>

to this:

<GridEvents CellSelected="cellselecthandler" 

                            QueryCellInfo="GridQueryCellInfoHandler"

                            TValue="ExpandoObject">

</GridEvents>

                

And add the handler

public void GridQueryCellInfoHandler(QueryCellInfoEventArgs<ExpandoObject> args)

    {

        

    }

You will duplicate the crash when you try to double click to edit a field. (Note: Event Id varies)

I am using Chrome with F12 showing the console.

blazor.webassembly.js:1 Uncaught (in promise) Error: System.ArgumentException: There is no event handler associated with this event. EventId: '196'.

Parameter name: eventHandlerId

  at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync (:44391/System.UInt64 eventHandlerId, Microsoft.AspNetCore.Components.RenderTree.EventFieldInfo fieldInfo, System.EventArgs eventArgs) <0x52791d8 + 0x00054> in <filename unknown>:0 

  at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.DispatchEventAsync (:44391/System.UInt64 eventHandlerId, Microsoft.AspNetCore.Components.RenderTree.EventFieldInfo eventFieldInfo, System.EventArgs eventArgs) <0x52843a8 + 0x00078> in <filename unknown>:0 

  at :44391/Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.ProcessNextDeferredEventAsync () <0x3bbd3b8 + 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 (:44391/_framework/wasm/dotnet.wasm:wasm-function[6049]:0x10f8b1)

    at do_icall_wrapper (:44391/_framework/wasm/dotnet.wasm:wasm-function[1896]:0x50b6a)

    at interp_exec_method (:44391/_framework/wasm/dotnet.wasm:wasm-function[1120]:0x2588e)

    at interp_runtime_invoke (:44391/_framework/wasm/dotnet.wasm:wasm-function[5655]:0xf7391)

    at mono_jit_runtime_invoke (:44391/_framework/wasm/dotnet.wasm:wasm-function[5109]:0xddb3d)

    at do_runtime_invoke (:44391/_framework/wasm/dotnet.wasm:wasm-function[1410]:0x3ba85)

    at mono_runtime_try_invoke (:44391/_framework/wasm/dotnet.wasm:wasm-function[418]:0xcfdb)

PS I took out your references to Telerik in your example code.

[Dhivya Rajendran]

Hi Scott, 

Thanks for your update. 

We would like to inform you that, the exception occurred 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. 

https://github.com/dotnet/aspnetcore/issues/21241 

Note : The Above error will not affect the default functionality of Grid. 

 

Modified Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorClient-321916643  

Regards, 

R.Dhivya 

[ScottAtScorpios]

Thank you, that answered my question.

[Renjith Singh Rajendran]

Hi Scott, 

Thanks for your update. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran