Add Link in Grid to Navigate to Product Details Page

1 Answer 165 Views
Grid
Roger
Top achievements
Rank 2
Veteran
Roger asked on 16 Aug 2021, 06:15 PM

Hi:

I'm new to Telerik for Blazor and was hoping to create a column of links in a Products Grid that would bring the user to the Product Details page for the particular link.   In particular, I want to go the the @page "/productdetails/{ProductId}"

I'm assuming the best method is with a template?  Here's what I have so far:

<GridColumns>
    <GridColumn Field="ProductId" Title="Id" />
    <GridColumn Field="Product" Title="User" />
    <GridColumn>
        <Template>
            @{
                <div><a href="#" @onclick="">Product Details</a></div>
                //onclick go to product details page and pass parameter
            }
        </Template>
    </GridColumn>
</GridColumns>

@page "/productdetails/{ProductId}"

Any help greatly appreciated.

1 Answer, 1 is accepted

Sort by
0
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
answered on 17 Aug 2021, 05:27 AM

Hi Roger,

I also use a template for this. However, in this case I use NavigationManager. 


 <GridColumn Field="@(nameof(customer.CustZip))">
                    <Template>
                        <span class="span-nav" @onclick="@(() => _navigationManager.NavigateTo($"CustZipPage/{(context as customer).CustZip}"))"> @((context as customer).CustZip) </span>
                    </Template>
                </GridColumn>

In the example, only CustZip must be replaced by Id.

 

href is ultimately also used by the NavigationManager. It calls a JavaScript of type "location.href". In this point you can also use your solution. I find NavigationManager in Blazor a bit more consistent.

 

Regards Matthias

Roger
Top achievements
Rank 2
Veteran
commented on 18 Aug 2021, 07:22 PM

Perfect - thanks Matthias!

Regards, Roger

Tags
Grid
Asked by
Roger
Top achievements
Rank 2
Veteran
Answers by
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Share this question
or