Blazor For Kids

DetailView in BlazorForKids

The DetailView component is a simple but powerful way to display all data for a specific entity in a clean, read-only layout. It’s commonly used for summary pages, profile views, audit screens, or any place where you want to show information without editing it.

Unlike GridView or EditForm, which are more interactive, DetailView is focused on presentation — helping you present a full snapshot of an entity, exactly as stored in the database.

Basic Usage

Just like other generated components in BlazorForKids, you can create a DetailView with a single line of code in the ComponentsDesigner:

You can then render the DetailView in your page like this:

            page.Content(content =>
            {
                content.DisplayComponent<EmployeeDetailView>(component=>
                {
                    component.SetParameter(a=>a.ItemKey,EmployeeId);
                });
            });
    

Use Cases for DetailView

• Display full profile details for a selected user or employee
• Show read-only information after a form submission
• Create review pages before confirmation or approval
• Present invoice or order details without edit options
• Display a full summary of an entity in a modal or preview pane

Because it's read-only and uses the full data model, DetailView works especially well for non-interactive or public-facing views.

Customizing Property Output

You can customize how individual fields are shown using a display template. To do this, you create a Blazor component that inherits from BkDetailViewPropertyValueTemplate<TModel, TValue>. This gives you access to both the full model and the specific value to render.

Example: Custom Display for FirstName

@inherits BkDetailViewPropertyValueTemplate<EmployeeModel, string>

            <p>
                <BkSvg Svg="@Icons.PERSON" />
                <span>@Value</span>
            </p>
    

The framework will inject the correct Value and Model automatically, so you can format the output, add icons, wrap the value in styling, or apply business logic for display.

Available Configuration Options

Inside PropertyOptions(...), you can use:

• Label(...) – Sets the display name of the field
• Tooltip(...) – Adds extra context when hovering the label
• CssClass(...) – Applies a custom CSS class to the field block
• FormatValue(...) – Allows formatting of raw values (e.g., “Mr./Ms. {0}”)
• HideProperty() – Completely hides the field from the view
• DisplayValueTemplate<TTemplate>() – Replaces the default text display with a custom component

Conclusion

The DetailView component is ideal when you want to show a full summary of an entity — without allowing edits. It works great for read-only scenarios, review screens, or when you need a clean presentation of all stored values.

By combining configuration options with custom display templates, you can tailor each field exactly the way you want, without sacrificing consistency or maintainability.