Fluentui: DetailsList : navigate between items and invoke them outside the component

[FullStackRafik]

Do you have any good suggestion to navigate between items and invoke them outside the component, from a button for example.

Thanks

[kkjeer]

Hi @FullStackRafik, I'm afraid I'm not sure what you're asking. Could you provide more detail, or ideally a CodePen that illustrates what you're trying to accomplish? Thanks!

[KevinTCoughlin]

Hey @FullStackRafik, this question may be better fielded on the SharePoint Developer Documentation repository: https://github.com/SharePoint/sp-dev-docs/issues since it involves webparts and routing.

[FullStackRafik]

@kkjeer : Here is what I want to do:
DetailsList component and button, I need when I click button I can navigate between the items of the DetailsList.
@KevinTCoughlin : It's not related to Webpart and routing(please forget about that), it's related to the Fabric UI DetailList component and if there is a property that can set the current index like for example "initialFocusedIndex".
I updated the question to be more simple.

[KevinTCoughlin]

@FullStackRafik, if you need to programmatically set selection similar to initialFocusedIndex (I'm assuming given your response above) then you'll need to look at the selection?: ISelection prop of DetailsList:

https://github.com/OfficeDev/office-ui-fabric-react/blob/ce9d7d57c847078fbc0c97deb89f1c71299739ff/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts#L92

The ISelection interface allows one to programmatically set, toggle, clear selection among other things.

https://github.com/OfficeDev/office-ui-fabric-react/blob/ce9d7d57c847078fbc0c97deb89f1c71299739ff/packages/office-ui-fabric-react/src/utilities/selection/interfaces.ts#L44

[FullStackRafik]

@KevinTCoughlin
Butr this method doesn't trigger "_onItemInvoked".

[KevinTCoughlin]

@KevinTCoughlin
Butr this method doesn't trigger "_onItemInvoked".

_onItemInvoked is only invoked on keyboard event as per its doc comment:

https://github.com/OfficeDev/office-ui-fabric-react/blob/bfe9b414a7620ea54351f98c805aef36bf3567d7/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts#L151

Since you're programmatically controlling selection, can you also programmatically invoke _onItemInvoked or whichever method you need?

[FullStackRafik]

I resolved my issues, now I can navigation between items by clicking a button (up and down), and I triggered programmatically _onItemInvoked method.

[kkjeer]

@FullStackRafik glad to hear it! If you don't have any other questions, please feel free to close this issue. Thanks!