0

I have been trying to use GroupedList within Fabric-React. I need to avoid multiple row selection if that can be helped. i.e. if I select a row, previously selected row should get de-selected.

Here's the groupedlist: https://developer.microsoft.com/en-us/fabric#/controls/web/groupedlist

Raj Abhishek
  • 1
  • You need to be specific when asking questions. It is best when you describe your problem and then present your code solution and the error messages you find. It is best not to make people link to different site. Instead the question must be reproducible by others given enough info. – mccurcio Feb 27 '20 at 20:00

1 Answers1

0

You have to use selectionMode={SelectionMode.single}

          <SelectionZone selection={this._selection} selectionMode={SelectionMode.single}>
            <GroupedList
              items={this._items}
              onRenderCell={this._onRenderCell}
              selection={this._selection}
              selectionMode={SelectionMode.single}
              groups={this._groups}
              compact={isCompactMode}
            />
          </SelectionZone>

Where the selectionMode on <GroupedList /> says only one selection per group and the selctionMode on <SelectionZone /> says only one selection for all groups.

Lumpenstein
  • 1,250
  • 1
  • 10
  • 27
  • Thanks @Lumpenstein ! This worked for me. oaxacamatt, thanks for the advice. I'll try and make my questions as specific as possible. – Raj Abhishek Mar 02 '20 at 07:20
  • Hi @lumpenstein ! I have another question on a grouped list. Say I want to add a drop-down/labels/input elements to group-headers in a grouped list. Is it possible to add the same as of today ? – Raj Abhishek Mar 02 '20 at 15:10
  • Look at the second example called `GroupedList example with custom header and footer` of the [groupedList documentaton](https://developer.microsoft.com/en-us/fabric#/controls/web/groupedlist). – Lumpenstein Mar 03 '20 at 07:01
  • Thanks @lumpenstien ! I replaced the element with my own div. Was able to create custom-elements in group header, but the tree structure was lost. I need the tree structure too, so I added the new divs inside . However, I got the tree structure back without my divs being honored. – Raj Abhishek Mar 03 '20 at 11:13