Property Groups

PropertyGroup displays a graph group's fields, methods, and child groups.

Client groups arrange a page. Server property groups apply rules to properties. Define each group separately. See the Order example for both.

Use a group to show related fields together, add a title, or change their layout.

1. Define Groups in the Graph

Create groups with .Group(...). Only their fields are added to the data query.

Flat group

new GraphBuilder("Customer")
	.Property("Name")
	.Property("Email")
	.Property("Phone")
	.Group("Profile", group => group
		.Property("Name")
		.Property("Email")
		.Property("Phone"));

Nested groups

Groups can contain child groups. This is the pattern used by the student sample graph:

new GraphBuilder("Student")
	.Property("FirstName")
	.Property("LastName")
	.Property("Address")
	.Property("Grade")
	.Reference("School")
	.Navigation("Assessments", nav => nav
		.Property("Subject")
		.Property("Mark")
		.Property("Grade"))
	.Group("Profile", profile => profile
		.Group("Identity", identity => identity
			.Property("FirstName")
			.Property("LastName"))
		.Group("Academic", academic => academic
			.Property("Grade")
			.Group("SchoolInfo", schoolInfo => schoolInfo
				.Property("School")))
		.Group("Location", location => location
			.Property("Address")));

Use these group names as PropertyGroup paths: Profile, Identity, Academic, SchoolInfo, and Location.

Groups with methods

Add methods beside fields:

new GraphBuilder("DocsOrder")
    .Group("Actions", group => group
        .Method("Post")
        .Method("ChangeNote")
        .Method("UndoPost"));

<PropertyGroup Path="Actions" Columns="3" ShowTitle="true" />

Inside a DataGraph, items appear in graph order. Methods use MethodButton. Core hides methods missing from the tenant's model, even for full-access users. It also hides methods the user cannot run. Disabled methods stay visible but greyed out. Detail layout shows buttons without field labels. Item templates can use IsMethod and MethodName.

Use SplitButton to show methods from the group in one button with a menu. It skips methods in child groups.

2. Render a Group on the Page

DataGraph shows top-level groups automatically when you omit ChildContent:

<DataGraph Builder="StudentPropertyGroupsSampleGraph.Build"
		   DataSet="@dataSet"
		   EntityGuid="@entityGuid" />

You can also place each group yourself:

<DataGraph Builder="StudentPropertyGroupsSampleGraph.Build"
		   DataSet="@dataSet"
		   EntityGuid="@entityGuid">
	<PropertyGroup Path="Profile" ShowTitle="true" />
</DataGraph>

PropertyGroup parameters:

Parameter Type Default Description
Path string required The group name from the graph definition.
Layout GroupLayout Horizontal Horizontal: grid. Vertical: stacked items. Detail: read-only label and value columns.
ShowLabel bool? null Shows or hides child labels. null uses the display-mode default: hidden in View/DataGrid. Detail always shows labels.
ShowColon bool? null Shows child labels with a colon, including in Detail. null or false adds no colon.
Columns int 1 Number of grid columns when Layout is horizontal.
ShowTitle bool false Shows the group name as a header.
Title string? null Overrides the displayed title without changing the graph name.
Class / Style string? null CSS class or inline style for the group.
ItemClass string? null CSS class for each item wrapper.
RenderItemsOnly bool false Shows items without the group's outer container.
ItemTemplate RenderFragment<PropertyGroupItemContext>? null Custom wrapper for each rendered item.
ChildContent RenderFragment? null Custom editors or layouts for properties and child groups.

Read-only detail layout

Layout="GroupLayout.Detail" shows Label: value pairs in two aligned columns. Use it for a read-only summary or drawer. Add ShowColon="true" to show a colon after each label.

<DataGraph Builder="CreateGraph" DataSet="@dataSet" EntityGuid="@guid" DisplayMode="DisplayMode.View">
	<PropertyGroup Path="Profile" Layout="GroupLayout.Detail" ShowColon="true" />
</DataGraph>

Labels come from the model's Label, or a readable form of the property name. The component adds the colon; do not put it in the model label. BooleanPropertyView shows its own label. Put boolean fields outside a Detail group to avoid showing the label twice.

3. Override One Property

Put a PropertyComponent inside the group to use a custom editor for one property:

<PropertyGroup Path="Profile" ShowTitle="true" Columns="2">
	<PropertyComponent Path="Address">
		<MudTextField T="string"
					  Value="@(context.Get<string>() ?? string.Empty)"
					  ValueChanged="@(value => context.Set(value))"
					  Label="Address Override"
					  Lines="3"
					  Variant="Variant.Outlined" />
	</PropertyComponent>
</PropertyGroup>

Only Address uses the custom editor. Core shows the other fields from the graph.

Path matching

Property overrides resolve in two steps:

  1. Exact path match, such as PrimaryContact.Note or Address.
  2. A short name, such as Note, if only one property in the group has that name.

Use the full path when several properties share the same name.

4. Override a Child Group

Put a PropertyGroup inside its parent group to change the child group's layout or title:

<PropertyGroup Path="Profile" ShowTitle="true" Columns="2">
	<PropertyGroup Path="Location" Title="Custom Location" ShowTitle="true">
		<PropertyComponent Path="Address">
			<MudTextField T="string"
						  Value="@(context.Get<string>() ?? string.Empty)"
						  ValueChanged="@(value => context.Set(value))"
						  Label="Address Override"
						  Lines="3"
						  Variant="Variant.Outlined" />
		</PropertyComponent>
	</PropertyGroup>

	<PropertyGroup Path="Academic"
				   Title="Academic Override"
				   ShowTitle="true">
		<PropertyGroup Path="SchoolInfo"
					   Title="School Auto Group"
					   ShowTitle="true"
					   Layout="GroupLayout.Vertical" />
	</PropertyGroup>
</PropertyGroup>

The child group's fields still come from the graph. The nested PropertyGroup changes how they appear.

5. Let Nested Groups Render Automatically

Showing a parent group also shows its child groups:

<PropertyGroup Path="Profile" ShowTitle="true" Columns="2" />

In the student example, this shows Identity, Academic, SchoolInfo, and Location from the graph.

6. When to Use What

  • Use .Group(...) in the graph to keep related fields, methods, and child groups together.
  • Use <PropertyGroup Path="..." /> on the page when you want to render that structure.
  • Use <PropertyComponent Path="..."> inside a group when you want to override a single property.
  • Use a nested <PropertyGroup> when you want to override a child group.

7. See Also