Property Groups

PropertyGroup is the layout counterpart to PropertyComponent: the graph defines named groups, DataGraph exposes them, and PropertyGroup renders them as a section of the page.

Use groups when you want to organize related properties into a visible block, add a title, control layout, or override part of the group without restating the whole page.

1. Define Groups in the Graph

Groups are created in GraphBuilder with .Group(...). They do not change the OData query shape by themselves; they are layout hints that tell the UI how to arrange already-selected properties.

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")));

The important part is the names: Profile, Identity, Academic, SchoolInfo, and Location are the paths that PropertyGroup uses on the page.

2. Render a Group on the Page

DataGraph already renders top-level groups automatically when you do not provide ChildContent:

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

That is equivalent to rendering the groups explicitly:

<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 uses a grid; Vertical stacks items.
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 Container styling hooks.
ItemClass string? null CSS class for each item wrapper.
RenderItemsOnly bool false Renders only the group items, not the outer container.
ItemTemplate RenderFragment<PropertyGroupItemContext>? null Custom wrapper for each rendered item.
ChildContent RenderFragment? null Inline overrides for properties and child groups.

3. Override One Property

Put a PropertyComponent inside the group when you want to replace the renderer for a single property but keep the rest of the group automatic.

<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>

Everything else in Profile still renders from the graph. Only Address uses the custom editor.

Path matching

Property overrides resolve in two steps:

  1. Exact path match, such as PrimaryContact.Note or Address.
  2. If the override uses only the leaf name, such as Note, it is accepted when that leaf is unambiguous within the rendered group.

That means you can target a property by its full graph path when you need precision, or use the short name when the group only contains one property with that leaf name.

4. Override a Child Group

Put a nested PropertyGroup inside another group when you want to override the layout or title of a child group without rewriting the parent group.

<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 is still driven by the graph definition. The nested PropertyGroup only changes how that group is rendered on the page.

5. Let Nested Groups Render Automatically

If a group contains child groups, you do not need to restate them on the page. Rendering the parent group is enough:

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

With the student sample graph, that renders Identity, Academic, SchoolInfo, and Location recursively from the graph definition.

This is the most compact option when you want the graph structure to drive the page and only need to override one or two pieces.

6. When to Use What

  • Use .Group(...) in the graph when you want to define the page structure and which properties belong 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