FluentUI DataGrid Performance and Mobile Responsiveness

[martingagne]

1. I've been impressed with Blazor's performance, but I've hit a snag with FluentUI DataGrid (see code below). The data loading significantly slows down the page, which is surprising given I'm only loading a minimal dataset (less than 10 rows with a few columns). I'm aiming to first render the page and then load the data to maintain that crisp performance. Could you point me to a high-quality example for this, or advise on the best approach for data loading? Ideally I would be able to use the loading control inside the Data Grid.

2. Ensuring the DataGrid works well on both desktop and mobile is key for my project. Does FluentUI DataGrid support adapting column visibility on mobile, or is customization required?

Thank you!

@page "/app/templates/"
@rendermode InteractiveServer

@using MRG.MyProject
@using MRG.MyProject.Data
@using MRG.MyProject.Managers
@using Microsoft.AspNetCore.Authorization
@using Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter

@Attribute [Authorize]

@Inject NavigationManager NavigationManager;
@Inject BrandingManager BrandingManager
@Inject TemplateManager TemplateManager

@BrandingManager.GetBrand() - Templates

Home Templates Add New

<FluentDataGrid @ref="datagrid" Items="@templates" GridTemplateColumns="20fr 50fr 10fr 10fr 10fr">

@code {

FluentDataGrid<Template> datagrid;
IQueryable<Template> templates = Enumerable.Empty<Template>().AsQueryable();

protected async override Task OnInitializedAsync()
{
    this.datagrid?.SetLoadingState(true);
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    this.templates = await TemplateManager.GetAllTemplatesAsync();
    this.datagrid.SetLoadingState(false);
    StateHasChanged();
}

private async Task Add()
{
    NavigationManager.NavigateTo(Endpoints.TemplatesNew);
}

private void Edit(Template template)
{
    NavigationManager.NavigateTo(Endpoints.EditTemplate(template.Id));
}

private async Task Delete(Template template)
{
    var items = await TemplateManager.GetTemplateByIdAsync(template.Id);

    if (items != null)
    {
        bool success = await TemplateManager.DeleteTemplateAsync(template.Id);
        this.templates = templates.Where(i => i.Id != template.Id);
    }
}

}

namespace MRG.MyProject.Managers
{
using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Identity;
using MRG.MyProject.Data;
using MRG.MyProject.Services;

public class TemplateManager
{
    private readonly ITemplateService templateService;
    private readonly ILogger<TemplateManager> logger;

    public TemplateManager(ITemplateService templateService, ILogger<TemplateManager> logger)
    {
        this.templateService = templateService ?? throw new ArgumentNullException(nameof(templateService));
        this.logger = logger ?? throw new ArgumentNullException(nameof(logger));
    }

    public async Task<IQueryable<Template>> GetAllTemplatesAsync()
    {
        try
        {
            this.logger.LogInformation("Retrieving all templates.");
            IQueryable<Template> templates = await this.templateService.GetAllTemplatesAsync();
            this.logger.LogInformation($"Retrieved templates successfully.");
            return templates;
        }
        catch (Exception ex)
        {
            this.logger.LogError(ex, "Failed to retrieve templates.");
            throw;
        }
    }
}

}

using MRG.MyProject.Data;
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace MRG.MyProject.Services
{
public interface ITemplateService
{
Task AddTemplateAsync(Template template);

    Task<Template?> GetTemplateByIdAsync(Guid id);

    Task<IQueryable<Template>> GetAllTemplatesAsync();

    Task<bool> DeleteTemplateAsync(Guid templateId);
}

public class TemplateService : ITemplateService
{
    private readonly ApplicationDbContext context;

    public TemplateService(ApplicationDbContext context)
    {
        this.context = context ?? throw new ArgumentNullException(nameof(context));
    }

    public async Task<IQueryable<Template>> GetAllTemplatesAsync()
    {
        return this.context.Templates.AsQueryable();
    }
}

}

[vnbaaij]

Hi Martin,

Please supply us with ready-to-run code (zip file or repository) to reproduce this if you want us to take a look. With the code you provided, we need to cut/copy/paste, create new files, etc, which just takes too much time (given the limited capacity we have). Before that though, I would start with examining the examples at https://www.fluentui-blazor.net/DataGrid (with source code available). Thee should give you some good starting points.

After just looking at your code (without running it), are you actually using a database to read data from? If not, the EntityFramworkCode adapter and code is unnecessary.

With regards to mobile, the DataGrid does not have good support for that. Mainly because the underlying web compnnets dont have specific mobile representations. It would definitely require customization