How do I create a RenderTreeBuilder and use Radzen.MouseEnter and args

Radzen.Blazor Components
1

I'm trying to implement the MouseEnter tag into my RenderTreeBuilder. Basically the RenderTreeBuilder.AddAttribute needs to have the same functionality as the inline MouseEnter tag for an icon. I am trying to get a simple tooltip to display.

This is the tag in the page. I need this functionality in my RenderFragment.
<RadzenIcon Icon="accessibility" MouseEnter="@(args => ShowTooltip(args, "My Tootip Text"))" />

Here is what I have.

internal RenderFragment<RadzenTreeItem> CategoryTemplate = (context) => builder =>
{
	builder.OpenElement(0, "div");
	builder.AddAttribute(1, "class", "inventory-category-container");

	builder.OpenElement(2, "div");
		builder.AddAttribute(3, "class", "inventory-category-icon");
		builder.OpenComponent<RadzenIcon>(4);
		builder.AddAttribute(5, nameof(RadzenIcon.Icon), "edit_note");
		builder.AddAttribute(6, "class", "inventory-category-icons");
		NOT WORKING - builder.AddAttribute(7, nameof(RadzenIcon.MouseEnter), EventCallback.Factory.Create<ElementReference>(context, args => ShowTooltip(args, "My Tootip Text")));
		NOT WORKING - builder.AddAttribute(7, nameof(RadzenIcon.MouseEnter), EventCallback.Factory.Create<ElementReference>(context, (args) => ShowTooltip(args, "My Tootip Text")));
		builder.CloseComponent();
	builder.CloseElement();

	builder.CloseElement();
};

private void ShowTooltip(ElementReference elementReference, string tooltipText)
{
	var ttOptions = new TooltipOptions() { Position = TooltipPosition.Top, Delay = 500 };
	_tooltip.Open(elementReference, tooltipText, ttOptions);
}
2

I found this post from 2021 but it does not provide a solution. I'm not using a static method but the error seems to say that.

3

Hi @DonnieRCrump

Give this a try -

@inject TooltipService _tooltipService
@page "/"

@using Microsoft.AspNetCore.Components.CompilerServices

<div class="rz-p-12 rz-text-align-center">

    <RadzenIcon Icon="accessibility" MouseEnter="@(args => ShowTooltip(args, "Tooltip from Markup"))" />
    
    @CategoryTemplate(null)

</div>

@code {
    private RadzenIcon? myRef;
    internal RenderFragment<RadzenTreeItem> CategoryTemplate;

    protected override void OnInitialized()
    {
        // Initialize the RenderFragment in the OnInitialized method to avoid referencing non-static members in a field initializer.
        CategoryTemplate = (context) => builder =>
        {
            builder.OpenElement(0, "div");
            builder.AddAttribute(1, "class", "rz-p-12 rz-text-align-center");
            builder.OpenComponent<Radzen.Blazor.RadzenIcon>(2);
            builder.AddComponentParameter(3, nameof(Radzen.Blazor.RadzenIcon.Icon), "accessibility");
            builder.AddComponentParameter(4, nameof(Radzen.Blazor.RadzenIcon.MouseEnter),
                RuntimeHelpers.TypeCheck<EventCallback<ElementReference>>(EventCallback.Factory.Create<ElementReference>(this, args => ShowTooltip(args, "Tooltip from Builder"))));
            builder.CloseComponent();
            builder.CloseElement();
        };
    }

    void ShowTooltip(ElementReference elementReference, string tooltipText)
    {
        var ttOptions = new TooltipOptions() { Position = TooltipPosition.Right, Delay = 500 };
        _tooltipService.Open(elementReference, tooltipText, ttOptions);
    }
}

The error was to do with trying to declare and initialize at the same time.

Hope this helps

Regards

Paul

4

I think it has something to do with the way I'm creating my RenderFragment. I tried the code and get the same errors. I can't reference "this" and still get the static to non-static issue. If I change the "this" to "context" that error goes away.

My code in running inside of this ..

internal RenderFragment<RadzenTreeItem> CategoryTemplate = (context) => builder =>
    {
	builder.OpenElement(0, "div");
	builder.AddAttribute(1, "class", "rz-p-12 rz-text-align-center");
	builder.OpenComponent<Radzen.Blazor.RadzenIcon>(2);
	builder.AddComponentParameter(3, nameof(Radzen.Blazor.RadzenIcon.Icon), "accessibility");
	builder.AddComponentParameter(4, nameof(Radzen.Blazor.RadzenIcon.MouseEnter),
		RuntimeHelpers.TypeCheck<EventCallback<ElementReference>>(EventCallback.Factory.Create<ElementReference>(this, args => ShowTooltip(args, "Tooltip from Builder"))));
	builder.CloseComponent();
	builder.CloseElement();
};
5

Hi @DonnieRCrump

If you check my code, I'm creating the variable
internal RenderFragment<RadzenTreeItem> CategoryTemplate;

and then assigning it within protected override void OnInitialized()

With your code, you are trying to assign the variable with the declaration. this will not be available at this point.

Regards

Paul

1 Like
6

Plugged the code in with the variable and initialized it in the OnInitializedAsync() and it worked. Thanks for the help. I was scratching my head on that one.

1 Like