javascriptreactjsoffice-fabric

Office Fabric UI React - Selection Problem


I'm using Office UI Fabric React components and i'm trying to make the selection work.

What i want is to get information on which row of DetailsList is selected.

This is what i've tried so far (keep in mind that i'm using javascript, not typescript).

        this._rowSelectIrf = new Selection({
            onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails() })
        })

    _getSelectionDetails = () => {
        const selectionCount = this._rowSelectIrf.getSelectedCount();

        console.log(selectionCount + " counted")

        return `${selectionCount} items selected`;

    }

                <MarqueeSelection selection={this._rowSelectIrf}>
                    <DetailsList
                        onColumnHeaderClick={this.onColumnClick}
                        items={this.state.sortedItems}
                        setKey="items"
                        columns={this.state.columns}
                        layoutMode={DetailsListLayoutMode.fixedColumns}
                        selection={this._rowSelectIrf}
                        selectionPreservedOnEmptyClick={true}
                        ariaLabelForSelectionColumn="Toggle selection"
                        ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                        onItemInvoked={this.onItemInvoked}
                        selectionMode="single"
                    />
                </MarqueeSelection>`

Selectin any row does literally nothing. I might've messed something up when converting from TS to JS so any tip is highly appreciated. Many thanks in advance!


Solution

  • Fixed by moving the selection to state. Not sure if this is the best approach, but i wont complain as long as it works.

    selectCon: new Selection({
    onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails() })
    }),