Blazor.FamilyTreeJS

This is a wrapper library for FamilyTreeJS and it is only compatible for Blazor WASM.

FamilyTreeJS version: 1.9.18

Installation

Install from Nuget.

dotnet add package Blazor.FamilyTreeJS --version <latest-version>

Depenencies

builder.Services.AddBlazorFamilyJS();

IJSRuntime configuration

Configure IJSRuntime's JsonSerializerOptions. This allows System.Text.Json to ignore null when serializing to JSON and send that JSON to Javascript. Note this affects globally.

var app = builder
  .Build()
  .ConfigureIJSRuntimeJsonOptions();

Enable C# callback interop with Javascript

This library depends on the library Blazor.Core in which provides the feature to help serialize/deserialize C# callback to Javascript. To ensure Blazor.FamilyTreeJS work correctly, you must call RegisterAttachReviverAsync() from the Blazor.Core library.

var webHost = builder
  .Build()
  .ConfigureIJSRuntimeJsonOptions();

await webHost.Services.RegisterAttachReviverAsync();
await webHost.RunAsync();

Serialize/deserialize derived types

If you have classes/records that inhereit from classes/records in this library, then you may need to use the following extension method, UseDerivedTypes<BaseType>([derive types]). This allows serializing your derived classes/records with all of their properties.

var app = builder
  .Build()
  .ConfigureIJSRuntimeJsonOptions();
  .UseDerivedTypes<Node>(typeof(NodeWithProfession))
  .UseDerivedTypes<NodeMenu>(typeof(CollapseNodeMenu), typeof(DrawLineNodeMenu));

public record NodeWithProfession : Node
{
  public string? Job { get; init; } = null;
}

public record CollapseNodeMenu : NodeMenu
{
  public Menu? Collapse { get; init; } = null;
}

public record DrawLineNodeMenu : NodeMenu
{
  public Menu? Draw { get; init; } = null;
}

Usage

Simplest usage is to provide a tree id.

<FamilyTree TreeId="my-tree" />

This library is heavily driven by the FamilyTreeOptions class so almost every control and UI are specified via this class. This C# class mirrors this Typescript options interface.

<FamilyTree TreeId="my-tree" Options=@new() { Mode = "dark" } />

Please refer to the sample project for more examples.