Blazor Tree Grid Example - Row Template
Project Press Enter to sort | Status / Tags Press Enter to sort | Timeline Press Enter to sort | Progress Press Enter to sort | Budget Press Enter to sort | Actions |
|---|
Program 1: Brandon Initiative
Brandon Lee • Design |
Active |
10/14/2025 → 12/12/2025 |
82% complete |
$51,853 / $95,062 (54%) |
|
Feature 1.1
Carla Gomez • Platform |
At Risk |
10/14/2025 → 1/14/2026 |
49% complete |
$6,189 / $35,646 (17%) |
|
Feature 1.2
Daniel Park • Data |
On Hold |
10/13/2025 → 11/27/2025 |
73% complete |
$11,297 / $35,280 (32%) |
|
Feature 1.3
Ella Brown • Mobile |
Done |
10/14/2025 → 12/24/2025 |
87% complete |
$9,578 / $11,765 (81%) |
|
Feature 1.4
Fred Cole • Release |
Planned |
10/19/2025 → 11/23/2025 |
88% complete |
$10,228 / $14,505 (70%) |
|
Feature 1.5
Grace Kim • Ops |
Active |
10/25/2025 → 11/18/2025 |
66% complete |
$6,731 / $45,557 (14%) |
|
Feature 1.6
Henry Zhao • Marketing |
At Risk |
10/31/2025 → 1/10/2026 |
42% complete |
$801 / $19,318 (4%) |
|
Feature 1.7
Ivy Chen • Product |
On Hold |
10/27/2025 → 2/6/2026 |
51% complete |
$5,462 / $10,197 (53%) |
|
Feature 1.8
Jack Ryan • Design |
Done |
11/2/2025 → 12/30/2025 |
48% complete |
$459 / $17,455 (2%) |
|
Feature 1.9
Alicia Keys • Platform |
Planned |
11/4/2025 → 1/25/2026 |
41% complete |
$3,938 / $15,758 (24%) |
|
Feature 1.10
Brandon Lee • Data |
Active |
10/15/2025 → 1/7/2026 |
47% complete |
$764 / $17,182 (4%) |
|
Program 2: Carla Initiative
Carla Gomez • Platform |
At Risk |
10/26/2025 → 12/15/2025 |
88% complete |
$91,569 / $130,443 (70%) |
|
Feature 2.1
Daniel Park • Data |
On Hold |
10/24/2025 → 11/14/2025 |
70% complete |
$7,557 / $28,258 (26%) |
|
Feature 2.2
Ella Brown • Mobile |
Done |
11/13/2025 → 12/10/2025 |
60% complete |
$399 / $33,204 (1%) |
|
Feature 2.3
Fred Cole • Release |
Planned |
11/2/2025 → 1/12/2026 |
38% complete |
$313 / $34,979 (0%) |
|
Feature 2.4
Grace Kim • Ops |
Active |
10/16/2025 → 11/5/2025 |
86% complete |
$8,626 / $13,188 (65%) |
|
Feature 2.5
Henry Zhao • Marketing |
At Risk |
11/21/2025 → 3/13/2026 |
29% complete |
$12,408 / $33,059 (37%) |
|
Feature 2.6
Ivy Chen • Product |
On Hold |
10/17/2025 → 12/13/2025 |
77% complete |
$7,469 / $17,094 (43%) |
|
Feature 2.7
Jack Ryan • Design |
Done |
11/6/2025 → 1/5/2026 |
78% complete |
$22,561 / $24,868 (90%) |
|
Feature 2.8
Alicia Keys • Platform |
Planned |
11/14/2025 → 12/5/2025 |
98% complete |
$51,795 / $54,084 (95%) |
|
Feature 2.9
Brandon Lee • Data |
Active |
11/13/2025 → 12/19/2025 |
76% complete |
$6,853 / $15,157 (45%) |
|
Feature 2.10
Carla Gomez • Mobile |
At Risk |
11/16/2025 → 12/20/2025 |
65% complete |
$3,608 / $16,734 (21%) |
|
Program 3: Daniel Initiative
Daniel Park • Data |
On Hold |
10/26/2025 → 3/23/2026 |
48% complete |
$115,474 / $171,946 (67%) |
|
Feature 3.1
Ella Brown • Mobile |
Done |
10/27/2025 → 1/10/2026 |
67% complete |
$38,718 / $59,491 (65%) |
|
Feature 3.2
Fred Cole • Release |
Planned |
10/29/2025 → 2/18/2026 |
35% complete |
$2,495 / $11,357 (21%) |
|
Feature 3.3
Grace Kim • Ops |
Active |
10/17/2025 → 11/27/2025 |
77% complete |
$16,726 / $39,616 (42%) |
|
Feature 3.4
Henry Zhao • Marketing |
At Risk |
11/24/2025 → 12/26/2025 |
58% complete |
$4,917 / $15,304 (32%) |
|
Feature 3.5
Ivy Chen • Product |
On Hold |
11/15/2025 → 2/25/2026 |
21% complete |
$439 / $10,452 (4%) |
|
Feature 3.6
Jack Ryan • Design |
Done |
11/20/2025 → 1/2/2026 |
73% complete |
$47,598 / $56,310 (84%) |
|
Feature 3.7
Alicia Keys • Platform |
Planned |
11/6/2025 → 1/28/2026 |
38% complete |
$7,935 / $41,266 (19%) |
|
Feature 3.8
Brandon Lee • Data |
Active |
10/23/2025 → 11/14/2025 |
97% complete |
$20,108 / $21,542 (93%) |
|
Feature 3.9
Carla Gomez • Mobile |
At Risk |
11/16/2025 → 12/19/2025 |
65% complete |
$10,113 / $54,169 (18%) |
|
Feature 3.10
Daniel Park • Release |
On Hold |
11/7/2025 → 1/21/2026 |
37% complete |
$5,562 / $45,623 (12%) |
|
Program 4: Ella Initiative
Ella Brown • Mobile |
Done |
11/4/2025 → 3/21/2026 |
34% complete |
$51,223 / $133,389 (38%) |
|
Feature 4.1
Fred Cole • Release |
Planned |
11/12/2025 → 1/25/2026 |
61% complete |
$46,502 / $57,387 (81%) |
|
Feature 4.2
Grace Kim • Ops |
Active |
10/29/2025 → 11/18/2025 |
98% complete |
$17,952 / $19,092 (94%) |
|
Feature 4.3
Henry Zhao • Marketing |
At Risk |
11/10/2025 → 1/28/2026 |
34% complete |
$3,748 / $30,001 (12%) |
|
Feature 4.4
Ivy Chen • Product |
On Hold |
12/2/2025 → 3/21/2026 |
22% complete |
$6,220 / $18,631 (33%) |
|
Feature 4.5
Jack Ryan • Design |
Done |
11/18/2025 → 3/12/2026 |
45% complete |
$38,199 / $51,116 (74%) |
|
Feature 4.6
Alicia Keys • Platform |
Planned |
11/7/2025 → 1/18/2026 |
43% complete |
$12,408 / $50,214 (24%) |
|
Feature 4.7
Brandon Lee • Data |
Active |
11/20/2025 → 12/28/2025 |
53% complete |
$5,451 / $23,856 (22%) |
|
Feature 4.8
Carla Gomez • Mobile |
At Risk |
11/19/2025 → 12/17/2025 |
92% complete |
$24,979 / $31,025 (80%) |
|
Feature 4.9
Daniel Park • Release |
On Hold |
11/25/2025 → 3/20/2026 |
30% complete |
$26,668 / $57,154 (46%) |
|
Feature 4.10
Ella Brown • Ops |
Done |
12/2/2025 → 1/6/2026 |
35% complete |
$8,317 / $39,376 (21%) |
|
Program 5: Fred Initiative
Fred Cole • Release |
Planned |
10/27/2025 → 2/23/2026 |
57% complete |
$73,128 / $93,323 (78%) |
|
Feature 5.1
Grace Kim • Ops |
Active |
11/6/2025 → 2/6/2026 |
48% complete |
$10,607 / $20,021 (52%) |
|
Feature 5.2
Henry Zhao • Marketing |
At Risk |
11/9/2025 → 12/18/2025 |
62% complete |
$2,967 / $56,737 (5%) |
|
Feature 5.3
Ivy Chen • Product |
On Hold |
10/25/2025 → 12/15/2025 |
72% complete |
$5,411 / $18,575 (29%) |
|
Feature 5.4
Jack Ryan • Design |
Done |
11/21/2025 → 1/27/2026 |
42% complete |
$12,875 / $28,374 (45%) |
|
Feature 5.5
Alicia Keys • Platform |
Planned |
11/12/2025 → 3/11/2026 |
52% complete |
$23,800 / $27,786 (85%) |
|
Feature 5.6
Brandon Lee • Data |
Active |
10/24/2025 → 2/14/2026 |
53% complete |
$24,300 / $39,652 (61%) |
|
Feature 5.7
Carla Gomez • Mobile |
At Risk |
11/24/2025 → 12/21/2025 |
88% complete |
$29,550 / $33,556 (88%) |
|
Feature 5.8
Daniel Park • Release |
On Hold |
11/22/2025 → 3/10/2026 |
15% complete |
$899 / $54,534 (1%) |
|
Feature 5.9
Ella Brown • Ops |
Done |
11/9/2025 → 11/30/2025 |
76% complete |
$22,411 / $54,539 (41%) |
|
Feature 5.10
Fred Cole • Marketing |
Planned |
11/12/2025 → 3/10/2026 |
56% complete |
$23,334 / $24,809 (94%) |
|
Program 6: Grace Initiative
Grace Kim • Ops |
Active |
12/1/2025 → 2/19/2026 |
17% complete |
$16,128 / $158,869 (10%) |
|
Feature 6.1
Henry Zhao • Marketing |
At Risk |
12/11/2025 → 2/5/2026 |
16% complete |
$5,941 / $27,193 (21%) |
|
Feature 6.2
Ivy Chen • Product |
On Hold |
12/16/2025 → 3/6/2026 |
28% complete |
$17,358 / $26,095 (66%) |
|
Feature 6.3
Jack Ryan • Design |
Done |
11/26/2025 → 3/10/2026 |
51% complete |
$24,025 / $24,543 (97%) |
|
Feature 6.4
Alicia Keys • Platform |
Planned |
11/21/2025 → 2/6/2026 |
27% complete |
$4,282 / $27,549 (15%) |
|
Feature 6.5
Brandon Lee • Data |
Active |
12/16/2025 → 1/15/2026 |
11% complete |
$10,316 / $57,240 (18%) |
|
Feature 6.6
Carla Gomez • Mobile |
At Risk |
11/28/2025 → 2/20/2026 |
48% complete |
$36,682 / $42,623 (86%) |
|
Feature 6.7
Daniel Park • Release |
On Hold |
12/15/2025 → 2/15/2026 |
10% complete |
$6,138 / $31,426 (19%) |
|
Feature 6.8
Ella Brown • Ops |
Done |
12/13/2025 → 2/24/2026 |
20% complete |
$17,938 / $43,608 (41%) |
|
Feature 6.9
Fred Cole • Marketing |
Planned |
12/29/2025 → 3/28/2026 |
12% complete |
$6,625 / $21,279 (31%) |
|
Feature 6.10
Grace Kim • Product |
Active |
12/23/2025 → 3/22/2026 |
23% complete |
$15,240 / $25,863 (58%) |
|
Program 7: Henry Initiative
Henry Zhao • Marketing |
At Risk |
10/31/2025 → 3/28/2026 |
52% complete |
$117,614 / $140,216 (83%) |
|
Feature 7.1
Ivy Chen • Product |
On Hold |
11/6/2025 → 1/7/2026 |
63% complete |
$10,231 / $18,182 (56%) |
|
Feature 7.2
Jack Ryan • Design |
Done |
10/21/2025 → 2/13/2026 |
42% complete |
$10,215 / $33,064 (30%) |
|
Feature 7.3
Alicia Keys • Platform |
Planned |
11/18/2025 → 1/18/2026 |
37% complete |
$2,783 / $14,776 (18%) |
|
Feature 7.4
Brandon Lee • Data |
Active |
11/8/2025 → 2/26/2026 |
42% complete |
$28,533 / $56,981 (50%) |
|
Feature 7.5
Carla Gomez • Mobile |
At Risk |
11/27/2025 → 3/15/2026 |
37% complete |
$26,662 / $41,671 (63%) |
|
Feature 7.6
Daniel Park • Release |
On Hold |
11/10/2025 → 1/1/2026 |
48% complete |
$1,435 / $13,160 (10%) |
|
Feature 7.7
Ella Brown • Ops |
Done |
11/15/2025 → 3/6/2026 |
23% complete |
$5,921 / $38,454 (15%) |
|
Feature 7.8
Fred Cole • Marketing |
Planned |
10/26/2025 → 12/22/2025 |
55% complete |
$78 / $15,472 (0%) |
|
Feature 7.9
Grace Kim • Product |
Active |
10/21/2025 → 12/3/2025 |
93% complete |
$46,179 / $55,831 (82%) |
|
Feature 7.10
Henry Zhao • Design |
At Risk |
11/5/2025 → 1/23/2026 |
64% complete |
$13,028 / $16,443 (79%) |
|
Program 8: Ivy Initiative
Ivy Chen • Product |
On Hold |
10/24/2025 → 12/13/2025 |
86% complete |
$52,396 / $80,125 (65%) |
|
Feature 8.1
Jack Ryan • Design |
Done |
11/4/2025 → 2/10/2026 |
55% complete |
$26,053 / $36,191 (71%) |
|
Feature 8.2
Alicia Keys • Platform |
Planned |
11/10/2025 → 2/26/2026 |
37% complete |
$11,161 / $27,611 (40%) |
|
Feature 8.3
Brandon Lee • Data |
Active |
11/14/2025 → 2/26/2026 |
52% complete |
$46,301 / $57,077 (81%) |
|
Feature 8.4
Carla Gomez • Mobile |
At Risk |
10/17/2025 → 1/24/2026 |
71% complete |
$48,098 / $56,727 (84%) |
|
Feature 8.5
Daniel Park • Release |
On Hold |
11/11/2025 → 3/7/2026 |
51% complete |
$40,958 / $50,315 (81%) |
|
Feature 8.6
Ella Brown • Ops |
Done |
11/19/2025 → 12/28/2025 |
77% complete |
$19,319 / $23,543 (82%) |
|
Feature 8.7
Fred Cole • Marketing |
Planned |
11/6/2025 → 2/25/2026 |
24% complete |
$3,346 / $55,904 (5%) |
|
Feature 8.8
Grace Kim • Product |
Active |
10/27/2025 → 2/9/2026 |
33% complete |
$3,060 / $29,477 (10%) |
|
Feature 8.9
Henry Zhao • Design |
At Risk |
10/19/2025 → 2/4/2026 |
71% complete |
$34,492 / $35,618 (96%) |
|
Feature 8.10
Ivy Chen • Platform |
On Hold |
11/5/2025 → 1/29/2026 |
35% complete |
$3,355 / $25,882 (12%) |
This sample demonstrates how to customize each row using a row template in the Tree Grid. It allows displaying data in a personalized layout with custom content and styling.
Row templates are configured using the RowTemplate property within the TreeGridTemplates component. To maintain the hierarchical structure and expand/collapse behavior, the tree column must be defined using the RowTemplateTreeColumn component.
In this demo, the row template is used to customize the layout of each row by combining multiple fields into a structured design:
- The "Project" column is set as the tree column using
RowTemplateTreeColumnand displays an icon, project name, owner, and department. - The "Status / Tags" column includes a status chip and tag indicators.
- The "Timeline" column shows the start and end dates.
- The "Progress" column displays a progress bar based on calculated values.
- The "Budget" column shows the spent and total budget with percentage usage.
- The "Actions" column includes a dropdown to update status and buttons to open or hold the project.
More information about row templates can be found in this documentation section.