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
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
@korchev Thanks For the Reply. It worked