FluentUI Data Grid and OData

[bytefish]

I have written an example project for connecting the FluentUI DataGrid to an OData-enabled Backend. It allows to query, sort and filter on the server-side with a few lines of code:

• https://github.com/bytefish/WideWorldImporters

Here is what the Data Grid looks like:

And it's possible to provide filters for each column, for example a filter on text:

The example project comes with components to define filters for each column, it looks like this in Razor:

@page "/Customers"
@using BlazorDataGridExample.Components
@using BlazorDataGridExample.Shared.Models;
@using BlazorDataGridExample.Shared.Extensions;
@using Microsoft.OData.Client;
@using WideWorldImportersService;

@inject WideWorldImportersService.Container Container

<PageTitle>Customers</PageTitle>

<h1>Customers</h1>

@if (CustomerProvider == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <FluentDataGrid @ref="DataGrid" ItemsProvider="@CustomerProvider" Pagination="@Pagination" TGridItem=Customer>
        <PropertyColumn Title="Customer ID" Property="@(c => c!.CustomerId)" Sortable="true" Align=Align.Start>
            <ColumnOptions>
                <NumericFilter TItem="int" PropertyName="CustomerId" FilterState="FilterState"></NumericFilter>
            </ColumnOptions>
        </PropertyColumn>
        <PropertyColumn Title="Name" Property="@(c => c!.CustomerName)" Sortable="true" Align=Align.Start>
            <ColumnOptions>
                <StringFilter PropertyName="CustomerName" FilterState="FilterState"></StringFilter>
            </ColumnOptions>
        </PropertyColumn>
        <PropertyColumn Title="Account Opened" Property="@(c => c!.AccountOpenedDate)" Format="yyyy-MM-dd" Sortable="true" Align=Align.Start>
            <ColumnOptions>
                <DateFilter PropertyName="AccountOpenedDate" FilterState="FilterState"></DateFilter>
            </ColumnOptions>
        </PropertyColumn>
        <PropertyColumn Title="Is On Credit Hold" Property="@(c => c!.IsOnCreditHold)" Sortable="true" Align=Align.Start>
            <ColumnOptions>
                <BooleanFilter PropertyName="IsOnCreditHold" FilterState="FilterState"></BooleanFilter>
            </ColumnOptions>
        </PropertyColumn>
        <PropertyColumn Title="Last Edited By" Property="@(c => c!.LastEditedByNavigation!.PreferredName)" Sortable="true" Align=Align.Start>
            <ColumnOptions>
                <StringFilter PropertyName="LastEditedByNavigation/PreferredName" FilterState="FilterState"></StringFilter>
            </ColumnOptions>
        </PropertyColumn>
    </FluentDataGrid>

    <FluentPaginator State="@Pagination" />
}

The article I have written contains some additional information on how to generate the OData Client and a bit of reasoning:

• https://www.bytefish.de/blog/blazor_fluentui_and_odata.html

[sardar97]

i hope fluent ui team use your codes to improve their datagrid as soon as possible because it is really helpful and powerful.

[hksalessio]

Couldn't you create a pull request for this feature? Would love to use this, it's incredible! Would be even better, if the filters also worked without OData (or maybe they already do?)

[bytefish]

The Filter Model isn’t tied to OData already, you can theoretically plug in a different Filter Manager for translating it.

Coming up with a Filter model, that satisfies everyone isn’t possible I think. There’s a reason people buy Telerik Components for the Data Grid (at least I did). 🫣

In a more recent implementation of the FluentUI Grid, I have used Kiota to generate a Client SDK from an OData Service. It works very well with Blazor. I think I will update the original blog article, because the OData Connected Client isn’t working well with Blazor.

That said, please let me know, if we can generalize something in the code.

[vnbaaij]

Coming up with a Filter model, that satisfies everyone isn’t possible I think. There’s a reason people buy Telerik Components for the Data Grid (at least I did). 🫣

It's okay, we forgive you 😉. I also think that an universal satisfactory Filter model is not achievable. What your article showed is that the DataGrid can use extensions for it. Think we should let the implementation details to you the developers instead of offering a default.

What we can do is update/extend the documentation on this. @bytefish are you willing to supply a PR with those steps (can be in Markdown format? Or do we just link to your blog?

[bytefish]

@vnbaaij Thanks. 🙏

That said, I also think it’s better to leave it to the developers and maybe add an example to the documentation, that could be copy and pasted.

I will polish the code a bit, extend the documentation and make a PR. 👍

[sardar97]

microsoft is one of the biggest company’s and they have a lot of clever developers! so please don’t leave it to the developers @vnbaaij 😂 . a big thanks for you as well @vnbaaij for sharing this template it was really helpful for me. and thanks for you too @vnbaaij and please try to improve your doc a little bit more specially about datagrid and server side filtering,pagination,sorting with remote data. 🙏

[bytefish]

@vnbaaij I am preparing a small example, and I will put it in the Demo/DataGrid/Examples folder. But I wanted to ask some questions beforehand, so we could probably save some PR-Ping-Pong. 👍

In the Code, I have a FilterState class, which should notify the DataGrid whenever something about the Filters changed. It sounded like, it is equivalent to a PageChangedEvent, so I just modeled it after the PaginationState. The PaginationState had a nice EventCallbackSubscribable, but the EventCallbackSubscribable was internal. So I copied it to the Project.

Is there any chance, we could make this public, so 3rd Party implementations could use it?

[vnbaaij]

My train of tought at the moment is to do include the Filter functionality in the library but leave the implementation of the actual filtering to the developer. So we don't assume there is EF or OData or whatever involved. We don't care.
Would that make sense? If so, then there is no need to make things public as the code will move to internal anyways.

[bytefish]

@vnbaaij Yes, that makes sense. I think I didn't explain well enough, what I mean. The current implementation works like this.

Just like the FluentUI Blazor PaginationState, I use an EventCallbackSubscribable in a FilterState:

• https://github.com/bytefish/WideWorldImporters/blob/548bd1c530f337b8aea804bb78c59ee52c81fbd8/src/WideWorldImporters.Client/WideWorldImporters.Client.Blazor/Components/Filter/FilterState.cs#L27

Because what's good for a PaginationState for a Data Grid, cannot be that wrong for a FilterState?

The FilterState then gets passed down into each Filter Component (think DateFilter, StringFilter, ...):

• https://github.com/bytefish/WideWorldImporters/blob/548bd1c530f337b8aea804bb78c59ee52c81fbd8/src/WideWorldImporters.Client/WideWorldImporters.Client.Blazor/Components/Filter/DateTimeFilter.razor.cs#L21

The FilterState also gets injected into the Page, where I am subscribing to an FiltersChangedEvent, like this:

• https://github.com/bytefish/WideWorldImporters/blob/548bd1c530f337b8aea804bb78c59ee52c81fbd8/src/WideWorldImporters.Client/WideWorldImporters.Client.Blazor/Pages/CustomersDataGrid.razor.cs#L43

So whenever the Filters change, I reload the DataGrid. All this leads to very succint code and I don't have to deal with subscribing to / unsubscribing from events and alike. The thing is, that the EventCallbackSubscribable in FluentUI Blazor is internal and cannot be used. So in my example I would have to either duplicate it, find a different way or ask nicely for making it public. 🫣

[vnbaaij]

It wasn't about the way you asked 😀I was more thinking that if we internalize the Filters we would not have to expose the code. But if the actual implementation of doing the filtering is external, it makes sense to have EventCallbackSubscribable public. @dvoituron Any thoughts on this?

[bytefish]

@vnbaaij My line of thinking is, that what’s in Fluent UI right now, is totally sufficient to provide DataGrid filtering. It should just provide an example in the documentation, that goes a bit further and provides ideas for a more “complex” implementation, such as the FilterState.

I have done the same with the VMWare Clarity Design DataGrid, where you have a set of abstractions for Filtering. But I found it easier to implement it in FluentUI, without being constrained by abstractions I had to work against.

Just a small “Copy and Pastable Example” will benefit the project more and reduce maintenance load.

[bytefish]

@vnbaaij I split my questions into separate comments, so we don't confuse it.

In the Code I wanted to have the Filter Selection DropDown in its own Component, so I do not pollute the several Filter Components with Conversion between Strings and Enumerations. This turned out to be somewhat problematic, when it comes to styling, or passing the additional Properties down to the Original ComboBox. I would rather avoid it.

These days, I would bind it straightforward at the expense of some more code, like this:

• https://www.bytefish.de/blog/binding_enums_in_fluentui.html

What's your thoughts on it? For this example I don't want to introduce any "over-engineered" overhead.

[vnbaaij]

I think this looks good. Not 'over-engineerd' at all.

Only thing is we don't currently use localization in the library and we woiuld actually like to avoid it (because of the extra work involved). We usually try to include template parameters for parts where people would want tou use their own wording. Is that enough for this filter addition as well? And if so, can we express the filter operations in a language neutral way?

[bytefish]

Hey everyone interested,

I have been trying to move the OData Fluent UI DataGrid example from my sample project to the FluentUI Demo page. But as far as I can see, it's not possible without writing miles and miles of integration code.

Why? At the moment I am generating an OData URI, that gets sent to the OData Endpoint. This is very simple to do, it's just some string formatting. A generic solution, that could be applied elsewhere, would need to operate on the IQueryable. And an IQueryable, now that's quite a beast to tame. Just ask the EntityFramework Core team.

I've considered some options for a demo, like the one Kendo UI once did:

• https://github.com/kendo-labs/dlinq-helpers

But from personal experience? It's a very brittle solution and I wouldn't give it a try. Also doing so sets very false expectations, which lead to bugs and pain down the line. Let's just say, the generated IQueryable is going to fail in EntityFramework Core. What I think I would actually end up is somewhat similar to what MudBlazor does at:

• https://github.com/MudBlazor/MudBlazor/tree/dev/src/MudBlazor/Components/DataGrid

You can see their FilterExpressionGenerator, which translates from a FilterDescriptor to an IQueryable. Yes, I could do the same and initially apply a "Copy and Paste Pattern" and maybe make this happen.

But all this would belong into a separate NuGet Package, rather than a Demo Page, if you ask me.

Tagging you for a notification @vnbaaij.

[bytefish]

I also saw the discussion on providing an OData Adapter at #1964, which is probably useful for the users in here to weigh in.