I have a Blazor WebAssembly app using IgbGrid. I need to pass the results of the RowEditDoneScript from the JavaScript script to a .Net method for processing. I have code that can successfully pass a string to .Net, but it fails if I try to pass the event args. Here are the relevant parts of the code that works:
event.js
var GLOBAL = {};GLOBAL.DotNetReference = null;GLOBAL.SetDotnetReference = function (objRef) { GLOBAL.DotNetReference = objRef;};
igRegisterScript("EvtRowEditDone", (event) => { var d = event.detail; GLOBAL.DotNetReference.invokeMethod("ProcessEvt", "Hello");}, false);
EvetTicketEdit.razor
@page "/eventticketedit"@implements IDisposable@inject IJSRuntime js
//in grid def
RowEditDoneScript="EvtRowEditDone" RowEditable="true"
private DotNetObjectReference<EventTicketEdit>? objRef;
protected async override Task OnAfterRenderAsync(bool firstRender) { var grid = this.grid; if (firstRender) { objRef = DotNetObjectReference.Create(this); await js.InvokeVoidAsync("GLOBAL.SetDotnetReference", objRef); } }
[JSInvokable("ProcessEvt")] public void ProcessEvt(string x) { }
public void Dispose() { objRef?.Dispose(); }
If I change the script to:
igRegisterScript("EvtRowEditDone", (event) => { var d = event.detail; GLOBAL.DotNetReference.invokeMethod("ProcessEvt", event);}, false);
And change the .razor code to:
[JSInvokable("ProcessEvt")] public void ProcessEvt(IgbGridEditDoneEventArgs x) { }
It appears to run successfully, but the EventArgs fields contain no data. In the script, I can see data in event.detail, but detail is blank at the ,Net end.
Can you provide an example of how I should be passing this data?
Hello Brad,
I have been investigating into the behavior you are looking to achieve, and I am curious as to why you are handling this at the JavaScript level? That is, why not just handle the RowEditDone event rather than RowEditDoneScript as this would eliminate the extra interop that you are doing between JavaScript and the .NET .razor level?
With the above said, I imagine you are likely getting an error in the console of the browser or the Output window in Visual Studio, as the conversion between the JavaScript object into an IgbGridEditDoneEventArgs object would very likely fail as I believe this can only really happen with primitive types. I believe if you change the parameters of the ProcessEvt method to be an object, you will see that it should be a System.Text.Json.JsonElement.
Please let me know if you have any other questions or concerns on this matter.
Thanks. I wasn't aware that there was a RowEventDone event available. Can you tell me where this is covered in the documentation? I haven't seen this covered in the documentation that I've been looking at, and I'd be happy to be directed to additional sources.
Okay. Success. I changed the grid entries to:
RowEditDone="EvtRowEditDone" RowAdded="EvtRowAdded" RowDeleted="EvtRowDeleted"
and changed my event handlers to:
protected void EvtRowAdded(IgbRowDataEventArgs e) { }
protected void EvtRowEditDone(IgbGridEditDoneEventArgs e) {
}
protected void EvtRowDeleted(IgbRowDataEventArgs e) {
and now they're firing.
I also added these three statements to the grid definition, but I'm assuming these are just for overriding the defaults if you have more than one grid on a page. Still no success.
RowEditDone="RowEditDone" RowAdded="RowAdded" RowDeleted="RowDeleted"
Okay. I've added these events to my razor page, but none of them seem to be firing. Do I need to do anything additional?
protected void RowAdded(IgbRowDataEventArgs e) { }
protected void RowEditDone(IgbGridEditDoneEventArgs e) {
protected void RowDeleted(IgbRowDataEventArgs e) {
The documentation currently covers the Row Editing feature of the IgbGrid here: https://ko.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/row-editing.
It does not really mention the RowEditDone event at the time of writing this though, outside of a mention in the API References section of the topic. Here is a link to the API listing the RowEditDone event as well: https://ko.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditDone.