muddatagrid - make an hyperlink or a button-CodePudding

This is the following link to try out the code

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudDataGrid Items="@Elements.Take(4)">
    <Columns>
        <Column T="Element" Field="Number" Title="Nr" />
        <Column T="Element" Field="Sign" />
        <Column T="Element" Field="Name" />
        <Column T="Element" Field="Position" />
        <Column T="Element" Field="Molar" Title="Molar mass" />
    </Columns>
</MudDataGrid>

@code { 
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }
}

using System.Collections.Generic;
using System.Text.Json.Serialization;

namespace MudBlazor.Examples.Data.Models
{
    public class Element
    {
        public string Group { get; set; }
        public int Position { get; set; }
        public string Name { get; set; }
        public int Number { get; set; }

        [JsonPropertyName("small")]
        public string Sign { get; set; }
        public double Molar { get; set; }
        public IList<int> Electrons { get; set; }

        public override string ToString()
        {
            return $"{Sign} - {Name}";
        }
    }
}

How will make an hyperlink or a button over the element Name?

CodePudding user response：

Something like this should do:

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudDataGrid Items="@Elements.Take(4)">
    <Columns>
        <Column T="Element" Field="Number" Title="Nr" />
        <Column T="Element" Field="Sign" />
        <Column T="Element" Field="Name">
            <CellTemplate>
                <MudButton Size="@Size.Small" Variant="@Variant.Filled" Color="@Color.Primary" OnClick="@(() => this.Click(context.Item))">
                    @context.Item.Name
                </MudButton>
            </CellTemplate>
        </Column>
        <Column T="Element" Field="Position" />
        <Column T="Element" Field="Molar" Title="Molar mass" />
    </Columns>
</MudDataGrid>

@code { 
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

    private void Click(Element element)
    {
        Console.WriteLine($"Clicked: {element.Name}");
    }
}