How to use a FluentIcon in a TemplateColum of a FluentDataGrid? Getting CS1662 and CS0411 compile errors

[mikeKuester]

Hi,

I want to use a FluentIcon in a TemplateColum of a FluentDataGrid, but I'm not able to compile my code.

I started with the Fluent Blazor Web App template in Visual Studio. At the weater page, I want to add a column with a FluentIcon that depends on the temperature. Therefore I added this extension:

using Microsoft.FluentUI.AspNetCore.Components;

namespace FluentBlazorWebApp.Components.Pages
{
    public static class Extensions
    {
        public static Icon ToIcon(this int temperature)
        {
            if (temperature < 0)
            {
                return new Microsoft.FluentUI.AspNetCore.Components.Icons.Filled.Size20.WeatherSnowflake();
            }
            else if (temperature < 15)
            {
                return new Microsoft.FluentUI.AspNetCore.Components.Icons.Filled.Size20.WeatherPartlyCloudyDay();
            }
            else
            {
                return new Microsoft.FluentUI.AspNetCore.Components.Icons.Filled.Size20.WeatherSunny();
            }
        }
    }
}

This is the modified code for the data grid:

<FluentDataGrid Id="weathergrid" Items="@forecasts" GridTemplateColumns="1fr 1fr 1fr 1fr 2fr" Loading="@(forecasts == null)" Style="height:204px;" TGridItem="WeatherForecast">
    <PropertyColumn Title="Date" Property="@(c => c!.Date)" Align="Align.Start"/>
    <TemplateColumn Title="TempIcon">
        @* <FluentIcon Value="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" Color="Color.Accent" /> *@
        <FluentIcon Value="@(c => c!.TemperatureC.ToIcon())" Color="Color.Accent" />
    </TemplateColumn>
    <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Align="Align.Center" />
    <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Align="Align.Center"/>
    <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Align="Align.End"/>
</FluentDataGrid>

If I use the FluentIcon with the fixed icon, it works. But I'm not able to use a variable icon.

I got this compiler errors:

CS1662 Cannot convert lambda expression to intended delegate type because some of the return types in the block are not implicitly convertible to the delegate return type

CS0411 The type arguments for method 'TypeInference.CreateFluentIcon_2(RenderTreeBuilder, int, int, Icon, int, Color?)' cannot be inferred from the usage. Try specifying the type arguments explicitly.

I also tried to extend the WeatherForecast class:

    private class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

        public Icon Icon => TemperatureC.ToIcon();
    }

... and use the property:

<FluentIcon Value="@(c => c!.Icon)" Color="Color.Accent" />

But that leads to the same errors.

I searched how to define the return type of the lambda:

https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/operators/lambda-expressions#explicit-return-type

var choose = object (bool b) => b ? 1 : "two"; // Func<bool, object>

But for example this leads to an syntax error and "more brackets" to other errors ...

<FluentIcon Value="@(Icon c => c!.Icon)" Color="Color.Accent" />

How can I use the FluentIcon in a data grid with icons depending of the values of each row?

Thanks,
Mike

[dvoituron]

This is more of a general question about Blazor and not about FluentUI-Blazor lib.

The FluentIcon component needs an instance of the icon to display via the Value attribute,
as indicated by your compilation error. By using Value=‘@(Icon c => c!.Icon)’ you are using a Lambda expression and not an instance of the icon.

So you need to go for a solution of this type:

<TemplateColumn Title="TempIcon">
    <FluentIcon Value="@(context.TemperatureC.ToIcon())" Color="Color.Accent" />
</TemplateColumn>

[mikeKuester]

@dvoituron thanks for your fast response!

I think the lambas for the Property lead me in the wrong direction.