How to Link Radzen Label to Navigate b/w Cards

Radzen.Blazor Components
1

Hello:

I'm facing an issue in linking Radzen Label Component to navigate to Card with in same Page. I have 5 Labels in SETTINGS page in a column and other half page(half column) I have 5 cards Containers. Just wondering if there's a way to navigate to 4th Card Container on click of 4th Label

2

You probably need to use JavaScript interop and the scrollIntoView method. You can get a ref to your card, create a JS function which calls scrollIntoView of its argument and invoke it with the Element property of the RadzenCard.

Scroll function

(define in some JS file that you have or inside a <script></script> tag in your index.html /_Host.cshtml)

function scrollToElement(element) {
     element.srollIntoView();
}

Get a reference of the RadzenCard you want to scroll to

<RadzenCard @ref=@myCard>
</RadzenCard>
@code {
   RadzenCard myCard;
}

Call the scrollToElement function via JS interop (you need to have IJSRuntime injected to your page)

@import using Microsoft.JSInterop;
@inject IJSRuntime JSRuntime

<RadzenCard @ref=@myCard>
</RadzenCard>

<RadzenButton Click=@OnClick />

@code {
    RadzenCard myCard;

    async Task OnClick()
    {
         await JSRuntime.InvokeVoidAsync("scrollToElement", myCard.Element);
    }
}
3 Likes
3

@korchev Thanks For the Reply. It worked