DetailsList onRenderCheckbox is not effective for group headers

[breezewish]

Environment Information

• Package version(s): latest (7.113.1)
• Browser and OS versions: latest Chrome, MacOS

Please provide a reproduction of the bug in a codepen:

I simply modified the DetailsList Grouped example, adding onRenderCheckbox:

https://codepen.io/breezewish/pen/ZEbjxOR

Actual behavior:

Group headers are not rendered by onRenderCheckbox, like below:

Expected behavior:

Expect all checkboxes are rendered by onRenderCheckbox.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) Yes if I have time

Requested priority: (Blocking, High, Normal, Low) Normal

Products/sites affected: (if applicable)

[aneeshack4]

@breeswish Thanks for reaching out to us. I see the behavior you're describing. It's not just onRenderCheckbox - even without passing in that custom behavior, the select all checkbox selects group headers but the group header checkbox only shows on hover. I realize this doesn't allow customizing the checkbox of the group header - you might still be able to do it with onRenderDetailsHeader.

This is low priority for us as we’re currently focused on larger work items focused on performance and coherence across the library (see pinned issue on the repo). I'm going to resolve this as won’t fix but when we schedule future work on this component, we may rethink this behavior so thank you for giving us feedback - we appreciate it!

[breezewish]

@aneeshack4 Thanks! Currently I copied the GroupHeader implementation in my App to replace the Check part, and used custom group header in the example to utilize my new customized GroupHeader, and it does resolve the issue. However code duplicating is not ideal.

Considering that it is low priority for your team, I would like to propose a PR by my own to help you fix it. I will add a property to GroupHeader to allow customizing the Check, and then pass onRenderCheckbox to this property in DetailsList. Or maybe another property called onRenderGroupHeaderCheckbox also seems good to me. Do you think it's ok?

[ecraig12345]

Someone actually just added a prop onRenderGroupHeaderCheckbox to GroupedList in #12105. They didn't include a way to pass it through via DetailsList, but it would be easy to add: basically just copy the prop definition to IDetailsListProps, then pass it into the GroupedList created in DetailsList's render method.

  /**
   * If provided, can be used to render a custom checkbox in the group headers.
   */
  onRenderGroupHeaderCheckbox?: IRenderFunction<IGroupHeaderCheckboxProps>;

Thanks for offering to help with this!

[breezewish]

@ecraig12345 Thanks for the information. I have opened a PR #13178 to implement this feature accordingly.

[Onokaev]

If anyone is still stuck on this issue, it is possible to provide a custom checkbox to a group header.
on groupProps, add onRenderHeader property: groupProps={onRenderHeader: _onRederGroupHeader}
Then go ahead and implement the onRenderGroupHeader function as:
const onRenderGroupHeader = (props:any):JSX.Element => { return ( <GroupHeader {...props} onRenderGroupHeaderCheckbox={your custom function that renders the checkbox} /> ) }

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.