Is it possible to retrieve size information from RadzenImage on click

Radzen.Blazor Components
1

Hi,
I have a RadzenImage on my page:

<RadzenImage Path="@myImage" Click="ImgClicked" />

and a function handling the mouse click on this image

private void ImgClicked(MouseEventArgs e)
{
dialogService.Alert($"Clicked {e.OffsetX}, {e.OffsetY}");
}

Now, this holds the reference X and Y coordinates for where the image was clicked, but nothing regarding the current image size. Is there any way to get the width/height of the image that was clicked?

In particular when the page has been resized and the image displayed is scaled, the clicked location needs some reference to determine where abouts in the mage it's been clicked

Any ideas would be gratefully appreciated.

Many thanks,

James

2

The properties of MouseEventArgs are available here. I don't think you can get the image size without JS interop calls.

@inject IJSRuntime JSRuntime

<RadzenImage id="myimage" Path="images/community.svg" Style="width: 15rem;" AlternateText="community" Click=@OnClick />

@code {
    async Task OnClick(MouseEventArgs args)
    {
        var width = await JSRuntime.InvokeAsync<int>("eval", "document.getElementById('myimage').offsetWidth");
        var height = await JSRuntime.InvokeAsync<int>("eval", "document.getElementById('myimage').offsetHeight");

        Console.WriteLine($"Width={width}, Height={height}");
    }
}
1 Like
3

Works perfectly, thank you :slight_smile: