Introducing Blazor-ApexGrid 1.0.0

Blazor-ApexGrid 1.0.0 shipped on July 8, putting the ApexGrid data grid in a strongly-typed ApexGrid<TItem> Razor component for .NET 8, 9 and 10. It is a new package, so nothing needs migrating: install it and write your grid in C#.

Key takeaways

• One install, no JavaScript setup. dotnet add package Blazor-ApexGrid; the grid's JS and CSS are served from _content/Blazor-ApexGrid/.
• Typed end to end: ApexGrid<TItem>, GridColumn<TItem> columns and typed EventCallbacks for 29 grid events.
• Inline editing in cell or row mode, with an undo and redo history.
• Tree data from a path field on each row, and master-detail from an HTML template.
• JSON state persistence plus a machine-readable schema for a view editor or an AI layer.
• Works in Blazor WebAssembly and Blazor Server; the core is apex-grid 3.3.0.

A typed grid in one Razor component

Define your row type, declare typed columns and pass configuration objects. Under the hood the package bundles ApexGrid as a self-contained ES module, so the web component is an implementation detail you never wire up.

@using Blazor_ApexGrid.Components
@using Blazor_ApexGrid.Models

<ApexGrid TItem="Person"
          Data="people"
          Columns="columns"
          Height="360px"
          Pagination="pagination"
          Selection="selection"
          OnRowSelected="OnRowSelected" />

@code {
    private readonly PaginationConfiguration pagination = new() { Enabled = true, PageSize = 10 };

    private readonly GridSelectionConfiguration selection = new()
    {
        Enabled = true, Mode = SelectionMode.Multiple, ShowCheckboxColumn = true,
    };

    private readonly List<GridColumn<Person>> columns = new()
    {
        new() { Key = "name", HeaderText = "Name", Sort = true, Filter = true },
        new() { Key = "age", HeaderText = "Age", Type = GridDataType.Number, Sort = true },
        new() { Key = "role", HeaderText = "Role", Filter = true },
    };

    private List<Person> people = new()
    {
        new() { Name = "Ada Lovelace", Age = 36, Role = "Mathematician" },
        new() { Name = "Alan Turing", Age = 41, Role = "Computer Scientist" },
    };

    private void OnRowSelected(GridRowSelectedEventArgs<Person> e) { /* e.Selected, e.Added, e.Removed */ }

    public class Person
    {
        public string Name { get; set; } = "";
        public int Age { get; set; }
        public string Role { get; set; } = "";
    }
}

Column Key values bind to row properties by their serialized (camelCase) name, so Name is referenced as "name". The hosted sample runs this grid, and the README documents the component.

Inline editing with undo and redo

Editing works in cell or row mode, with a built-in history stack. Mark each editable column with Editable = true:

<ApexGrid TItem="Person" @ref="grid" Data="people" Columns="columns"
          Editing="editing" OnCellValueChanged="OnEdited" OnHistoryChanged="OnHistory" />

@code {
    private readonly GridEditingConfiguration editing = new()
    {
        Enabled = true, Mode = EditMode.Cell, Trigger = EditTrigger.DoubleClick,
        History = new() { Enabled = true },
    };
}

Drive it from C# with EditCellAsync, CommitEditAsync, UndoAsync, RedoAsync and CanUndoAsync. In the hosted sample, double-click an Age or Role cell, then use the Undo and Redo buttons. Inline editing in the ApexGrid docs describes the underlying behaviour.

State persistence, and a schema for AI

The grid captures its whole view (columns, sort, filter, pagination, selection and more) as a JSON-safe snapshot and restores it later. Only the slices present in a snapshot are applied, so partial restores work:

var snapshot = await grid.GetStateAsync();   // JSON-safe; persist it anywhere
await grid.SetStateAsync(snapshot);          // restore later

GetSchemaAsync returns a machine-readable description of the grid (its columns, available operations and current state) for driving a view editor, or an AI layer that needs to understand and change the grid. The hosted sample has Save state and Restore state buttons. See State persistence for what a snapshot captures.

Also in 1.0.0

• Sorting, filtering and quick filter: Sort and Filter column flags, SortConfiguration for multi-column and tri-state sorting, SetQuickFilterAsync.
• Pagination: local or remote, with GotoPageAsync, NextPageAsync and SetPageSizeAsync.
• Selection: single or multiple, with an optional checkbox column.
• Columns: pin, reorder (ColumnReordering="true" for drag), resize and show or hide.
• Rows: pin to sticky bands with RowPinning, reorder by drag or keyboard with RowReordering.
• Tree data: point GridTreeConfiguration.PathKey at a path array on each row; no callbacks needed.
• Master-detail: DetailTemplateHtml renders a detail panel whose {field} tokens are replaced with the row's HTML-escaped values.
• Events: all 29 surface as typed EventCallbacks with affected rows as your TItem; the README lists them by area.

The full notes are in the v1.0.0 GitHub release, and the source is on GitHub.

Licensing

Blazor-ApexGrid bundles ApexGrid, so it follows the ApexGrid licence. The Community License is free for individuals and organizations under $2M in annual revenue, budget or funding. At or above that threshold you need a paid Commercial license, and embedding the grid in a product or platform that others use needs an OEM license. See pricing and the licence.

Install

dotnet add package Blazor-ApexGrid

The package is on NuGet and multi-targets .NET 8, 9 and 10. Nothing else is required.

Frequently asked questions