2

TL;DR; DetailList has parameter groupProps={{ onRenderHeader: this._onRenderGroupHeader }} but onRenderHeader is not called on every selector click.

Fluent UI documentation shows how to show a grouped list https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped and how to show custom group rows: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/customgroupheaders

We need to show number of currently selected items in the group header which should be updated/rendered on each item selection change. the _onRenderGroupHeader method in the latter example has props, which include the current group and the selection object, from which we can infer the selected count for the group. Sounds fine.

The simplified method:

const _onRenderGroupHeader = props => <div>{`Header for ${props.group!.name}`}</div>;

I can get

const { group, selection } = props;
const { startIndex, count } = group;
const selectedIndices = selection.getSelectedIndices();
const selectedCountInGroup = selectedIndices.reduce((selectCount, idx) => (
(idx >= startIndex && idx < startIndex + count) ? selectCount + 1 : selectCount
), 0);

and display selectedCountInGroup in the header string.

But here is the PROBLEM: _onRenderGroupHeader is not executed on every selection button click in a group. I can see it called when all items are selected. Any help is appreciated

Pavel bosin
  • 61
  • 1
  • 3
  • With no community support to this topic in two weeks I have to abandon the use of Fluent UI Selection object and to manually implement custom group headers, custom group and item selectors, and custom group collapse/expand caret. – Pavel bosin Jul 29 '21 at 21:04
  • Did you ever come back to this issue? I was able to add a selection counter to the header by binding a event to `onRenderTitle` but this counter only updates when the header is expanded or collapsed. – Corey Sutton Dec 01 '22 at 21:27

0 Answers0