TELERIK Grid Blazor- Type arguments for parameter cannot be inferred from usage

Question

Type arguments for method TypeInterface.CreateTelerikTreeList_1(RenderTreeBuilder, int, int, IEnumerable, int, RenderFragment) cannot be inferred from use.

This error appears when my api returns this:

{
  "middlewareId": "string",
  "description": "string",
  "protocol": "string",
  "server": "string",
  "port": "string",
  "path": "string",
  "user": "string",
  "active": true
}

The error appears the line of the <TelerikTreeList Data="InfoMiddleware">

I do something similar with the Flow to generate a Telerik Grid but for this case the api is sending something like this and in this case it is creating the table without error.

[
  {
    "flowId": "string",
    "middlewareId": "string",
    "Active": true
  }
]

<TelerikTreeList Data="InfoMiddleware">
        <TreeListColumns>
            <TreeListCommandColumn>
                <TreeListCommandButton Icon="edit">Edit</TreeListCommandButton>
            </TreeListCommandColumn>
            <TreeListColumn Field=@nameof(MiddlewareModel.MiddlewareId) Title="Middleware"/>
            <TreeListColumn Field=@nameof(MiddlewareModel.Description) Title="Middleware"/>
            <TreeListColumn Field=@nameof(MiddlewareModel.Protocol) Title="Middleware" />
            <TreeListColumn Field=@nameof(MiddlewareModel.Server) Title="Middleware" />
            <TreeListColumn Field=@nameof(MiddlewareModel.Path) Title="Middleware"/>
            <TreeListColumn Field=@nameof(MiddlewareModel.UserName) Title="Middleware"/>
            <TreeListColumn Field=@nameof(MiddlewareModel.Active) Title="Middleware" />
        </TreeListColumns>
    </TelerikTreeList>

@code {
    [Parameter]
    public string? environmentId { get; set; }
    [Parameter]
    public string? middlewareId { get; set; }

    private MiddlewareModel? InfoMiddleware;
    private FlowModel[]? Flows;

    protected override async Task OnInitializedAsync()
    {
        InfoMiddleware = await HttpClient.GetFromJsonAsync<MiddlewareModel?>($"https://localhost:57031/api/Environments/{environmentId}/Middlewares/{middlewareId}");

        try
        {
            Flows = await HttpClient.GetFromJsonAsync<FlowModel[]?>($"https://localhost:57031/api/Environments/{environmentId}/Middlewares/{middlewareId}/Flows");
        }
        catch (Exception ex)
        {
            Logger.LogWarning(ex, ex.Message);
            Flows = new FlowModel[] {};
        }
    }
}

Answer 1

Usually one would use a model to define individual columns, and a collection of said model to define the Data of the component - eg something that implements IEnumerable.

In your case, it seems that you are using the same MiddlewareModel model for both, which should not be the case. Try defining a collection of MiddlewareModel and pass this instead to the Data param.