-
Notifications
You must be signed in to change notification settings - Fork 461
[DataGrid] Add Hierarchical DataGrid functionality #4484
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: dev
Are you sure you want to change the base?
Conversation
- Update file headers
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 60.9%
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This pull request adds hierarchical data support to the FluentDataGrid component, enabling the display of parent-child relationships with expandable/collapsible rows. The implementation introduces core abstractions (IHierarchicalGridItem, HierarchicalGridItem<TItem, TGridItem>, and HierarchicalGridUtilities) along with UI enhancements for toggling hierarchy levels and demo examples showcasing the feature.
Changes:
- Added hierarchical grid infrastructure with interface, base class, and utility methods
- Extended FluentDataGrid and column components with hierarchical toggle support and validation
- Created demo pages with examples showing Olympic medal data by continent and organizational chart scenarios
- Updated sample data to include continent codes for hierarchical grouping
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
src/Core/Components/DataGrid/IHierarchicalGridItem.cs |
Defines interface for grid items that can participate in hierarchies |
src/Core/Components/DataGrid/HierarchicalGridItem.cs |
Base class providing hierarchy state management (depth, collapsed, hidden) |
src/Core/Components/DataGrid/HierarchicalGridUtilities.cs |
Utility methods for building hierarchical structures from flat lists |
src/Core/Components/DataGrid/FluentDataGrid.razor.cs |
Adds OnToggle event and validation for hierarchical toggle columns |
src/Core/Components/DataGrid/FluentDataGrid.razor |
Implements UI rendering for expand/collapse buttons and indentation |
src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs |
Adds HierarchicalToggle parameter to enable hierarchy controls on columns |
src/Core/Components/DataGrid/FluentDataGridCell.razor.css |
Styling for hierarchical toggle buttons and indentation |
examples/Demo/Shared/Pages/DataGrid/Examples/DataGridHierarchical.razor |
Demo showing Olympic medals grouped by continent |
examples/Demo/Shared/Pages/DataGrid/Examples/DataGridHierarchicalOrgChart.razor |
Demo showing multi-level organization chart |
examples/Demo/Shared/Pages/DataGrid/Examples/DataGridHierarchicalOrgChart.razor.cs |
Code-behind with sample data generation for org chart |
examples/Demo/Shared/Pages/DataGrid/Pages/DataGridHierarchicalPage.razor |
Documentation page for hierarchical grid feature |
examples/Demo/Shared/SampleData/Olympics.cs |
Updated Country record to include continent code |
examples/Demo/Shared/SampleData/DataSource.cs |
Added continent data and updated Olympic data with continent codes |
examples/Demo/Shared/Shared/DemoNavProvider.cs |
Added navigation link to hierarchical grid demo |
examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor |
Added link to hierarchical grid in advanced features section |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This pull request introduces hierarchical data support for the
FluentDataGridcomponent, enabling grids to display parent-child relationships and multi-level hierarchies. It adds new demo pages and examples to showcase hierarchical grids, including an organization chart. The changes also include updates to sample data and documentation to support these features.Hierarchical DataGrid Support
HierarchicalGridItem<TItem, TGridItem>base class,IHierarchicalGridIteminterface, andHierarchicalGridUtilitiesutility class to enable hierarchical relationships in grid items. These types allow items to have children, track hierarchy depth, and manage collapsed/hidden states.HierarchicalTogglefor columns andOnToggleevent callback for grids) to control and respond to row expand/collapse actions in hierarchical grids. [1] [2]Demo Pages and Examples
DataGridHierarchical.razorandDataGridHierarchicalOrgChart.razorexamples, demonstrating hierarchical data display and multi-level nesting in the grid, including programmatic expand/collapse of rows. [1] [2] [3]/datagrid-hierarchicalto showcase hierarchical grid features and usage.Sample Data Improvements