Blazor: intercept an EventCallback to add some code

Question

In my Blazor WebAssembly application, I use a lot the TelerikGrid component, provided by Telerik Kendo, but my question could be the same with another component. I need to execute some code at the end of the execution of the handler of the "OnRead" EventCallback of TelerikGrid, as bellow:

protected async Task OnReadHandler(GridReadEventArgs args)
{
    args.Data = _myClient.GetData();  //some code

    // This line is the one I need to repeat accros all handlers of OnRead in my application
    await JSRuntime.InvokeVoidAsync("attachAllGridCells");
}

I do not know if Blazor can achieve my request. In addition, the component TelerikGrid cannot be modified, as it is from a third-party. I've tried something, with no good result:

Create a component which extend TelerikGrid, and trying to somehow override OnRead. But as it is an EventCallback, and not a method, I cannot do that easily:

public partial class CustomTelerikGrid<T> : TelerikGrid<T>
{
    [Parameter]
    public new EventCallback<GridReadEventArgs> OnRead { get; set; }

    async Task TestAsync()
    {
        await this.OnRead.InvokeAsync(); // access to my "new" eventcallback
        await base.OnRead.InvokeAsync(); // access to the "original" eventcallback
    }
}

Is there way I can achieve that? I believe not really with my knowledge of Blazor, but maybe someone can have an idea, thanks in advance for any help.

Aleksandr Stepanov · Accepted Answer · 2023-01-11 14:55:32Z

4

We have a grid component in our project that extends TelerikGrid. We made class TelerikGridSettings with parameters from base Telerik Grid which we use in our grids across our project like that:

public partial class TelerikGridSettings<TItem> : BaseComponent
{
    [Parameter]
    public IEnumerable<TItem> Data { get; set; }

    [Parameter]
    public decimal RowHeight { get; set; }

    [Parameter]
    public RenderFragment GridColumns { get; set; }

    [Parameter]
    public EventCallback<GridReadEventArgs> OnRead { get; set; }
    
    /// etc
}

Then in your custom GridComponent you use TelerikGrid and fill parameters like that, and also insert your custom OnReadHandler:

<TelerikGrid TItem="TItem"
            Data=@Data
            RowHeight=@RowHeight
            GridColumns=@GridColumns
            OnRead=@OnReadHandler
            // etc />

In your OnReadHandler you will invoke TelerikGrid common OnRead event callback and after that use your JS method:

private async ValueTask OnReadHandler()
{
    await OnRead.InvokeAsync();

    // your js method
}

Then you can use your GridComponent exactly as you use TelerikGrid right now.

Hope this helps. Also this approach will give you more flexibility in customizing your grid.

answered Jan 11, 2023 at 14:55

Aleksandr Stepanov

965 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dylan El Bar Over a year ago

Actually we thought about this solution which work perfectly, but we wanted to look at some "less code" to achieve the same behavior. But you're right, encapsulate the whole component would give us more flexibility in general, and for some future evolution we need. I let the post as "unsolved" for a couple of days, in case of any other "simplest" way to achieve it could be provided. Anyway, thanks a lot :)

Collectives™ on Stack Overflow

Blazor: intercept an EventCallback to add some code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related