Blazor.FlexGrid

GridView component for Blazor

Easy way for displaying lits of items in table

IMPORTANT!

Still development not completely finished and rapidly continue. Next versions can contain breaking changes

Breaking change after support .NET Core 3.1 Preview 1

In Blazor WASM you have to manually add into index.html links to the css and js FlexGrid files

<link href="_content/Blazor.FlexGrid/FlexGridStyles.css" rel="stylesheet" />
<link rel="stylesheet" href="_content/Blazor.FlexGrid/fontawesome/css/fontawesome.css" />
<link rel="stylesheet" href="_content/Blazor.FlexGrid/fontawesome/css/all.css" />
<link rel="stylesheet" href="_content/Blazor.FlexGrid/fontawesome/css/regular.css" />
<link rel="stylesheet" href="_content/Blazor.FlexGrid/fontawesome/css/solid.css" />
<link rel="stylesheet" href="_content/Blazor.FlexGrid/fontawesome/css/svg-with-js.css" />
<link rel="stylesheet" href="_content/Blazor.FlexGrid/fontawesome/css/v4-shims.css" />
<script src="_content/Blazor.FlexGrid/flexGridIntereop.js"></script>

Version 0.11.0 contains new Triggers feature more info in wiki

Version 1.0.0 contains breaking change more info in release

Installation

After nuget installation you must create in Blazor.Client app Linker.xml file because nuget uses some features which are not supported in default mono managed interpreter from WebAssembly (https://github.com/mono/mono/issues/8872)

<linker>
  <assembly fullname="mscorlib">
    <!-- Preserve all methods on WasmRuntime, because these are called by JS-side code
    to implement timers. Fixes https://github.com/aspnet/Blazor/issues/239 -->
    <type fullname="System.Threading.WasmRuntime" />
  </assembly>
  <assembly fullname="System.Core">
    <!-- This is required by JSon.NET and any expression.Compile caller -->
    <type fullname="System.Linq.Expressions*" />
    <type fullname="System.Linq.EnumerableRewriter*" />
    <type fullname="System.Linq.Queryable*" />
    <type fullname="System.Linq.Enumerable*" />
  </assembly>
  <!-- Name of the entry point assembly -->
  <assembly fullname="Blazor.FlexGrid.Demo.Client" />
</linker>

And Add this into csproj of client project

<ItemGroup>
	<BlazorLinkerDescriptor Include="Linker.xml" />
</ItemGroup>

Setup

public void ConfigureServices(IServiceCollection services)
{
    services.AddFlexGrid();
}

Setup Blazor App as RazorComponents AKA ServerSide Blazor App

public void ConfigureServices(IServiceCollection services)
{
    services.AddFlexGridServerSide();
}

Note: Add the following line to the Configure(...) method of your Startup.cs file.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseFlexGrid(env.WebRootPath);
}

From your index.(cs)html add references

<link rel="stylesheet" href="Blazor.FlexGrid/FlexGridStyles.css" />
<link rel="stylesheet" href="Blazor.FlexGrid/fontawesome/css/fontawesome.css" />
<link rel="stylesheet" href="Blazor.FlexGrid/fontawesome/css/all.css" />
<link rel="stylesheet" href="Blazor.FlexGrid/fontawesome/css/regular.css" />
<link rel="stylesheet" href="Blazor.FlexGrid/fontawesome/css/solid.css" />
<link rel="stylesheet" href="Blazor.FlexGrid/fontawesome/css/svg-with-js.css" />
<link rel="stylesheet" href="Blazor.FlexGrid/fontawesome/css/v4-shims.css" />
<script src="Blazor.FlexGrid/flexGridIntereop.js"></script>

For properly working of LazyLoaded functionality some services must be registered in IoC. Because in web scenario FlexGrid uses Http services which are provided in IoC by default, but in server side scenario you have to provide these services.

public void ConfigureServices(IServiceCollection services)
{    
	services.TryAddScoped(typeof(ILazyDataSetLoader<>), typeof(NullLazyDataSetLoader<>));
    services.TryAddScoped(typeof(ILazyDataSetItemManipulator<>), typeof(NullLazyDataSetItemManipulator<>));
    services.TryAddScoped(typeof(ICreateItemHandle<,>), typeof(NullCreateItemHandler<,>));
}

These services are registered by default in IoC if you want for your grid use funtionality like lazy loading data, inline editing or create item form you have to provide these services for your models.

In your Blazor component add Tag helper and required usings

@addTagHelper *, Blazor.FlexGrid

Example

@addTagHelper *, Blazor.FlexGrid
@using Blazor.FlexGrid.Demo.Shared
@using Blazor.FlexGrid.DataAdapters
@inject HttpClient Http
@page "/grid"

<h1>Weather forecast</h1>

<GridView DataAdapter="@dataAdapter" PageSize="5"></GridView>

@functions{
    CollectionTableDataAdapter<WeatherForecast> dataAdapter;

    protected override async Task OnInitAsync()
    {
        var forecast = await Http.GetJsonAsync<WeatherForecast[]>("/api/SampleData/WeatherForecastsSimple");
        dataAdapter = new CollectionTableDataAdapter<WeatherForecast>(forecast);
    }
}

Result <img src="/docs/ReadmeImages/flextable.png" alt="table"/>

Configuration

You do not need to define information about columns and components will render columns by properties of object type which is associated with table data adapter which provide data set for Table component. Value for column is provided by ToString method on the property type. Or you can configure some behavior for tables and columns by using fluent api which is supported in classes where interface IEntityTypeConfiguration<TItem> is implemented.

public class WeatherForecastGridConfiguration : IEntityTypeConfiguration<WeatherForecast>
{
    public void Configure(EntityTypeBuilder<WeatherForecast> builder)
    {
        builder.Property(e => e.Date)
            .HasCaption("Date")
            .HasValueFormatter(d => d.ToShortDateString());

        builder.Property(e => e.Summary)
            .HasCaption("MySummary")
            .HasOrder(1)
            .HasValueFormatter(s => $"{s}!");

        builder.Property(e => e.TemperatureC)
            .IsSortable();

        builder.Property(e => e.TemperatureF)
            .IsSortable();
    }
}

And provide this configuration

var serviceProvider = new BrowserServiceProvider(services =>
{
    services.AddFlexGrid(cfg =>
    {
        cfg.ApplyConfiguration(new WeatherForecastGridConfiguration());
    });
});

Data Adapters

You can use simple CollectionTableDataAdapter which requires collection of items.

@functions{
    CollectionTableDataAdapter<WeatherForecast> dataAdapter;

    protected override async Task OnInitAsync()
    {
        var forecast = await Http.GetJsonAsync<WeatherForecast[]>("/api/SampleData/WeatherForecastsSimple");
        dataAdapter = new CollectionTableDataAdapter<WeatherForecast>(forecast);
    }
}

Another data adapter type is LazyLoadedTableDataAdapter<TItem> which support lazy loading data from API. This type of adapter is registered in dependency injection conatiner and you must only provide LazyLoadingOptins to table component.

@addTagHelper *, Blazor.FlexGrid
@using Blazor.FlexGrid.Demo.Shared
@using Blazor.FlexGrid.DataAdapters
@using Blazor.FlexGrid.DataSet.Options
@page "/lazyloadedgrid"
@inject HttpClient Http
@inject LazyLoadedTableDataAdapter<WeatherForecast> forecastAdapter

<GridView DataAdapter="@forecastAdapter" LazyLoadingOptions="@(new LazyLoadingOptions() { DataUri = "/api/SampleData/WeatherForecasts" })" PageSize="10"></GridView>

Also you must provide the server side part

public IActionResult WeatherForecasts(int pageNumber, int pageSize, SortingParams sortingParams)
{
    var rng = new Random();

    var items = Enumerable.Range(1, 100).Skip(pageSize * pageNumber).Take(pageSize).Select(index =>
                new WeatherForecast
                {
                    Date = DateTime.Now.AddDays(index),
                    TemperatureC = rng.Next(-20, 55),
                    Summary = Summaries[rng.Next(Summaries.Length)]

                });

    items = string.IsNullOrEmpty(sortingParams.SortExpression)
        ? items
        : items.AsQueryable().OrderBy(sortingParams.SortExpression).ToList();

    return Ok(
        new
        {
            Items = items,
            TotalCount = 100
        });
}

After that you have fully pageable and sortable table with lazy loaded data after you select new page

Permission restriction

You can configure permission restricion of showing/editing values for each column in table for current logged user. You only have to do 3 things. First create class which implements interface ICurrentUserPermission. Second provide configuration for permission restriction for exmaple:

public void Configure(EntityTypeBuilder<Customer> builder)
{
	builder.Property(c => c.Email)
		.HasReadPermissionRestriction(perm => perm.IsInRole("Read"))
		.HasWritePermissionRestriction(perm => perm.IsInRole("Write"));
}

And last thing is register ICurrentUserPermission into DI container as Singleton.

Blazor components in column

You can configure column value for rendering Blazor component this way: First add using Blazor.FlexGrid.Components.Configuration. Second inject required service BlazorComponentColumnCollection<T> into HTML of component where you use FlexGrid And the last thing you have to provide RenderFragment for columns

@inject BlazorComponentColumnCollection<WeatherForecast> Collection

@{
    RenderFragment<WeatherForecast> weatherTemp = (weather) => @<BlazorButton>@weather.Summary</BlazorButton>;
	Collection.AddColumnValueRenderFunction(w => w.Summary, weatherTemp);
}

Also you can use registration of fragment in startup conf

Blazor.FlexGrid

Install / Use

README

Blazor.FlexGrid

IMPORTANT!

Installation

Setup

Setup Blazor App as RazorComponents AKA ServerSide Blazor App

Example

Configuration

Data Adapters

Permission restriction

Blazor components in column