Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

FluentDataGrid: pinned column offsets leak into the grid of an open RowDetails (master-detail)

Closed Beginner friendly
#5,350 4 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
csharp, javascript
Domain
frontend, web-dev

Research direction

Start in Components/DataGrid/FluentDataGrid.razor.js at UpdatePinnedColumnOffsets and reproduce a FluentDataGrid with pinned columns and nested RowDetails grid. Scope the header and body cell selection to the current table, then verify that master offsets remain correct and nested header cells no longer overlap or receive the wrong inset.

Written by the indexing model from the issue text.

Description

Not reproducible

Setup: a FluentDataGrid with pinned columns (Pin="DataGridColumnPin.Start" / End) and RowDetails whose content is
another FluentDataGrid that also has pinned columns (master-detail).

Actual: once a detail is open, the pinned cells of the master grid are shifted by their own width (start column moved right,
end column moved left), and header cells of the nested grid overlap.

Cause: UpdatePinnedColumnOffsets (Components/DataGrid/FluentDataGrid.razor.js) uses
gridElement.querySelectorAll("th[col-pinned='start']") / 'end', which also returns the pinned headers of the nested grid, then
applyOffset writes the offset on every [col-index="N"] cell of the subtree — master and nested cells share col-index values.
The unpinned cells of the nested grid that share a col-index also receive inset-inline-* (visible on the sticky header row).

Suggested fix: only consider the grid's own header row and rows, e.g. gridElement.tHead.rows[0].cells and the cells of
gridElement.tHead.rows / gridElement.tBodies[n].rows instead of a subtree query.
(Workaround in our app: a MutationObserver that recomputes the offsets per table.)

Environment: Microsoft.FluentUI.AspNetCore.Components 5.0.0 / Microsoft.FluentUI.AspNetCore.McpServer 5.0.0, Blazor Server, net9.0, Chrome, Windows 11. Found while migrating an application from 4.14.4 to 5.0.0.

Dominant language
C#
Stars
4.8k
Forks
483
Avg merge
15h 36m
Merged PRs (30d)
77

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/fluentui-blazor

All issues in microsoft/fluentui-blazor

Similar issues

More C# issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.