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!
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() })
}),