Is there a Blazor equivalent to WinForm's PropertyGrid?

Question

I have a long overdue UI upgrade for a WinForms application and am going to make it a Blazor app. The legacy app configuration is made using WinForm's PropertGrid. Is there an equivalent Blazor component or best practice for converting a settings class into a Blazor form?

e.g.

class MySettings{

public string Name {get;set;}
public int Age {get;set;}
public string Address {get;set;}

// 1000 other settings of int, string, enums etc

}

Is there a way to render MySettings into a nice Blazor form, or a Blazor component that can be used without designing the form in a Razor page with thousands of inputs binded to each property in MySettings.

This is the long form way of doing it with validation:

<EditForm Model="@_mySettingsModel" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="_mySettingsModel.Name" />
    <InputText id="age" @bind-Value="_mySettingsModel.Age" />
    <InputText id="address" @bind-Value="_mySettingsModel.Address" />

    <button type="submit">Submit</button>
</EditForm>

@code {
    private MySettings _mySettingsModel = new MySettings();

    private void HandleValidSubmit()
    {
        Console.WriteLine("Saving Settings...");
    }
}

Reference: https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1

I have built one with reflection. But editing capabilities should be added also to it. At least it supports nested levels of objects now. — Tore Aurstad

Tore Aurstad Tore Aurstad · Accepted Answer · 2020-12-30T23:08:29

The PropertyGrid of WinForms is rather advanced and supports also editing. Blazor do not have an official component for this (yet).

The following GIF shows a component I made in use. It currently supports the basic scenario of inspecting objects with nested structure. You cannot edit properties yet with the component.

Update: the property grid is now more condensed and editors are added (they are turned to readonly as editing capability itself is not added yet. Screenshot:)

I have made a simple PropertyGrid component for Blazor at the following repo url:

git clone https://github.com/toreaurstadboss/BlazorPropertyGrid/tree/main/BlazorPropertyGrid

The GitHub repo both have got a Razor component library project and a sample Blazor Server project (with client) that uses this component, so it should be easy to test out and improve. I will maybe add editing capabilities to this control sometime..

Simple Blazor Property Grid component @ Github

The screen shot below shows that you can inspect objects with nested levels.

The Github repo also shows the code necessary to get started in creating a Property Grid control. I might add editing capabilities for it, you can fork it as it is just a demo project I spent some hours on today. Disclaimer: do not use this component in production environment, it is just a small hobby mini project.

Is there a Blazor equivalent to WinForm's PropertyGrid?

1 Answers