This is a migrated thread and some comments may be shown as answers.

Links within Grid

7 Answers 493 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Cameron
Top achievements
Rank 1
Cameron asked on 14 Jun 2019, 02:50 PM

Hey guys, I currently have a grid that outputs values from a database within a grid. This works well however I have one field that contains sets of Url's. This is currently output as text.

Is there anyway to make it a href/link or can you only output text within the grid?

Thanks,

Cameron

7 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 14 Jun 2019, 04:00 PM
Hi,

You can use a template and render in it a markup string.

Here's a small example I made for you:

@using Telerik.Blazor.Components.Grid
 
<TelerikGrid Data="@MyData" Height="500px">
    <TelerikGridColumns>
        <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name">
            <Template>
                @{
                    var employee = context as SampleData;
                    @((MarkupString)$"<a href=\"http://mysite.com/employee/{employee.ID}\" target=\"_blank\">{employee.Name}</a>")
                }
            </Template>
        </TelerikGridColumn>
        <TelerikGridColumn Field="HireDate" Title="Hire Date - Default string">
        </TelerikGridColumn>
    </TelerikGridColumns>
</TelerikGrid>
 
@functions {
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
 
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        ID = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    });
}


Regards,
Marin Bratanov
Progress Telerik UI for Blazor
0
Cameron
Top achievements
Rank 1
answered on 14 Jun 2019, 04:03 PM
Excellent, I'll give it a go.

Thanks
0
Dustin
Top achievements
Rank 1
answered on 10 Dec 2019, 10:40 PM
This worked for me in the sense that the cell now acts as a hyperlink and downloads my target file, but the text in the cell is not blue or underlined.  Are there additional formatting options that will help indicate to the user that the cell acts like a hyperlink?
0
Marin Bratanov
Telerik team
answered on 11 Dec 2019, 08:35 AM

Hello Dustin,

This was just one example of rendering an HTML link inside the grid cell. You can alter it as needed (e.g., to use an actual anchor, without a markup string cast), or to add a class to it that will provide the desired appearance (like altering the color and adding some underlining). This is entirely up to your preferences, the template lets you put the desired content in it. You may also find this KB article useful on altering the cell background.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
0
Dustin
Top achievements
Rank 1
answered on 13 Dec 2019, 04:58 PM
Thank you for the response!  I'll check out your link.
0
Bob
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 06 Oct 2020, 08:50 PM

I am doing this with a mailto link, however I also have Selection Turned on for the grid.

The link works to open an email but I need to stop the row selection as it is causing an error.

Is there any way to have the link work as a link when clicked on but have row selection work for anything else clicked on in the row?

0
Marin Bratanov
Telerik team
answered on 07 Oct 2020, 07:19 AM

Hi Bob,

You can stop the event propagation in the template to prevent selection, you can see an example here: https://docs.telerik.com/blazor-ui/components/grid/selection/overview#selection-in-template

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Grid
Asked by
Cameron
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Cameron
Top achievements
Rank 1
Dustin
Top achievements
Rank 1
Bob
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or