TD.Shared.Blazor 1.1.17

TD.Shared.Blazor

Shared Razor component library built on top of DevExpress Blazor components. Provides ready-to-use grid panels, export, filtering, and layout components for Blazor Server applications.

Installation

<PackageReference Include="TD.Shared.Blazor" Version="x.x.x" />

Getting Started

1. Register services

Call UseSkiaRendering() in Program.cs after WebApplication.CreateBuilder. This configures the cross-platform Skia rendering engine (required for PDF export on Linux/Docker) and registers the encoding provider for correct character rendering.

var builder = WebApplication.CreateBuilder(args);

builder.Services.UseSkiaRendering();
builder.Services.AddDevExpressBlazor();
builder.Services.AddBlazoredLocalStorage();

2. Register scripts and styles in App.razor

In the root App.razor, add the following inside the <head> element to register DevExpress and TD.Shared.Blazor JavaScript and CSS resources:

<head>
    ...
    @DxResourceManager.RegisterScripts()
    @TD.Shared.Blazor.Helpers.TDResourceManager.RegisterJs()
    @TD.Shared.Blazor.Helpers.TDResourceManager.RegisterCss()
</head>

3. Add namespace imports

Add to your _Imports.razor:

@using TD.Shared.Blazor.Components
@using TD.Shared.Blazor.Helpers
@using TD.Shared.Blazor.Enums

Components

AceDxGridCard

A full-featured grid inside a card. Includes a built-in toolbar with filter panel, column chooser, export button, refresh button, and an optional create button.

<AceDxGridCard Data="@items"
               ItemType="typeof(MyItem)"
               LocalStorageKey="my-grid"
               VisibleCreateButton="true"
               CreateNewRow="OnCreateNew"
               RowClick="OnRowClick">
    <Columns>
        <DxGridDataColumn FieldName="Name" />
        <DxGridDataColumn FieldName="CreatedAt" />
    </Columns>
</AceDxGridCard>
Parameter Type Default Description
Data object? — Grid data source
ItemType Type — Type of the data item (required)
LocalStorageKey string? null Key for persisting grid layout in local storage
Header string? null Optional heading above the grid
VisibleExportButton bool true Show/hide export button
VisibleAddFilterButton bool true Show/hide filter panel button
VisibleChooseColumns bool true Show/hide column chooser button
VisibleRefreshButton bool false Show/hide refresh button
VisibleCreateButton bool false Show/hide create button
CreateButtonRoles string? null Comma-separated roles that can see the create button
AutoFitColumnsWidth bool true Auto-fit column widths on load
ShowAllRows bool false Show all rows (no pager)
ShowSearchBox bool false Show search box
KeyFieldName string? null Key field for selection
SelectionMode GridSelectionMode Single Row selection mode
Columns RenderFragment? — Column definitions
Buttons RenderFragment? — Additional toolbar buttons
RowClick EventCallback — Row click event
CreateNewRow EventCallback — Create button click event
SelectedDataItemChanged EventCallback<object> — Single selection change
SelectedDataItemsChanged EventCallback<IReadOnlyList<object>> — Multi-selection change

AceDxGridPanel

Same as AceDxGridCard but with a collapsible panel wrapper. Useful for secondary grids on a page.

<AceDxGridPanel Data="@items"
                ItemType="typeof(MyItem)"
                Header="Results"
                Collapsed="false"
                LocalStorageKey="my-panel-grid">
    <Columns>
        <DxGridDataColumn FieldName="Name" />
    </Columns>
</AceDxGridPanel>

Additional parameters beyond AceDxGridCard:

Parameter Type Default Description
Collapsed bool true Whether the panel starts collapsed
AllowCollapse bool true Enable/disable collapse toggle

DxGridWrapper

Base grid component with local storage state persistence (column order, widths, visibility) and optional inline editing.

<DxGridWrapper Data="@items"
               LocalStorageKey="my-grid-state"
               AllowEdit="true"
               KeyFieldName="Id"
               EditModelSaving="OnSave"
               DataItemDeleting="OnDelete">
    <Columns>
        <DxGridDataColumn FieldName="Name" />
    </Columns>
    <EditFormTemplate Context="ctx">
        <!-- edit form -->
    </EditFormTemplate>
</DxGridWrapper>
Parameter Type Default Description
Data object? — Data source
LocalStorageKey string? null Key for layout persistence
AllowEdit bool true Enable inline editing (double-click)
ShowAllRows bool false Show all rows without paging
PageSize int 10 Rows per page
AutoFitColumnsWidth bool false Auto-fit column widths
ShowSearchBox bool false Show search box
SelectionMode GridSelectionMode Multiple Row selection mode
KeyFieldName string? null Primary key field
LoadingPanelVisible bool false Show loading overlay

DxExportWrapper

Export dropdown button supporting CSV, XLSX, XLS, and PDF formats.

<DxExportWrapper Grid="@gridWrapperRef" />
Parameter Type Default Description
Grid DxGridWrapper — Reference to the grid to export
VisibleExportButton bool true Show/hide the button

DxEditColumnsWrapper

Column chooser button — lets the user show/hide and reorder grid columns at runtime.

<DxEditColumnsWrapper Grid="@gridWrapperRef" />

CollapsableCard

A simple collapsible Bootstrap card.

<CollapsableCard Header="Details" Collapsed="true">
    <Body>
        <p>Content goes here.</p>
    </Body>
</CollapsableCard>
Parameter Type Default Description
Header string? null Card header text
Collapsed bool true Initial collapsed state
Body RenderFragment? — Card body content

FilterPanelComponent

Advanced column filter panel. Renders filter inputs based on property types of the data model. Typically used automatically inside AceDxGridCard / AceDxGridPanel.

Helpers

FilterConfigurationExtensions

Extension method to build filter data sources from a collection:

var filterConfigs = items.CreateFilterConfigurations(
    ("Status", FilterType.Select),
    ("Category", FilterType.Select)
);

Docker / Linux Setup

Required when deploying to Linux containers (Docker).

PDF export uses the SkiaSharp rendering engine instead of GDI+ (which is Windows-only). The following system packages and Program.cs setup are required.

Program.cs

UseSkiaRendering() already handles the engine configuration automatically:

builder.Services.UseSkiaRendering(); // sets Skia engine + encoding provider

Dockerfile

The runtime Docker image must include font and rendering libraries. Add the following to your Dockerfile:

FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS runtime

RUN apt-get update && \
    apt-get install -y \
        # Required by the DevExpress Skia rendering engine
        libfontconfig1 \
        libfreetype6 \
        # Fonts — without these, exported PDFs will have missing text or squares
        fonts-liberation \
    && apt-get clean && rm -rf /var/lib/apt/lists/*

Docker Compose

If you manage system package installation separately or use a shared base image, ensure the same packages are present in the runtime service image. There is no compose-level configuration needed beyond what the Dockerfile provides.

Note: The NuGet package SkiaSharp.NativeAssets.Linux.NoDependencies is included as a transitive dependency and provides the native Skia library as a self-contained .so — no additional system Skia installation is required.

Supported Export Formats

Format Headers support Notes
CSV Always with headers UTF-8 encoded
XLSX Optional
XLS Optional
PDF Always with headers Requires Skia setup (see above)

No packages depend on TD.Shared.Blazor.

.NET 10.0

Version Downloads Last updated
1.1.17 2 03/10/2026
1.1.16 3 03/09/2026
1.1.15 4 03/07/2026
1.1.14 11 03/03/2026
1.1.11 10 02/25/2026
1.1.10 15 02/25/2026
1.1.9 2 02/24/2026
1.1.8 6 02/20/2026
1.1.7 5 02/19/2026
1.1.5 5 02/18/2026
1.1.4 11 02/12/2026
1.1.3 9 02/11/2026
1.1.2 17 02/09/2026
1.1.1 13 02/06/2026
1.0.11 44 01/21/2026
1.0.10 21 01/20/2026
1.0.9 20 01/16/2026
1.0.7 43 12/18/2025
1.0.3 21 12/10/2025